Dobré odpoledne, nebo spíše noc, milí přátelé. Zrovna před pár minutami jsem do šablony přidával nějaké plavky. Šablona byla nepřizpůsobivá a problém byl v její struktuře, skrývala část obsahu (ta byla potřeba) a při vstupu z mobilního prohlížeče (z telefonu nebo tabletu) se obsah i kus stránky byly oříznuty. Toto nedorozumění jsem se snažil napravit a při „terénních testech v praxi“ jsem si to uvědomil nejlepší řešení je použití metaznačky viewport.
Značka je určena pro správné škálování webu na různá zařízení, například na zařízeních, kde je rozlišení obrazovky menší, než je nutné. Štítek používejte často v adaptivní šablony, ale málokdo ví, že se může hodit i v běžných neresponzivních designech.
Podívejme se na možná pravidla pro použití značky:
1. Šířka
Tím označujeme celé číslo v pixelech (od 200px do 10000px) popř. "šířka zařízení". Tím se nastaví šířka výřezu, pokud pro vás není šířka zadána, vezme se automaticky:
- 980px – pro mobilní Safari
- 850px – Opera
- 800px – Android WebKit
- 974px – IE
2.Výška
Funguje na stejném principu jako šířka. Často se však v 99% případů jednoduše nepoužívá, takže jej nemůžete vystavit, pokud nevíte, zda jej potřebujete nebo ne. Každopádně se s tím dá experimentovat...
3. Počáteční měřítko
Tento parametr nastavuje měřítko stránky. Vše je zde elementární, zvyšte hodnotu - zvyšte měřítko. K dispozici jsou pro něj následující hodnoty od 0,1 do 10. Pokud jej nastavíte na 1,0, označíme, že stránka není zmenšena.
4. Uživatelsky škálovatelné
Určuje, zda lze změnit měřítko stránky. Může zdědit hodnoty Ano nebo Ne. V prohlížeči Safari je výchozí hodnota Ano,
5. Minimální měřítko a maximální měřítko
Tyto možnosti definují minimální a maximální povolené měřítko pro metaznačku viewport. Dostupné hodnoty jsou od 0,1 do 10. Pokud ji nastavíte na 1,0, dáme prohlížeči vědět, že nemění měřítko stránky. Mobilní prohlížeč Safari je nastaven na minimální měřítko = "0,25" a maximální měřítko = "1,6".
Nyní přejděme k případům použití.
Metaznačka viewport se obvykle používá k nastavení šířky a počátečního měřítka zobrazované oblasti webu na mobilních zařízeních, například:
Přesně stejným příkladem můžete postupovat, pokud váš obsah není široký (není oříznut prohlížečem), ale spíše úzký (někde se objeví prázdné místo):
Typickou chybou, kterou můžete zaznamenat při používání metaznačky viewport, je, že budete používat hodnotu počáteční měřítko=1 pro neresponzivní šablony. Co je špatně? Co je zde špatně, je to, že toto nastavení způsobí, že se 100 % stránky vykreslí bez změny měřítka. Uživatel si tedy bude muset sám nastavit měřítko nebo stránku posouvat po dlouhou dobu.
Chyba může být také sdílení parametry uživatelsky škálovatelné=ne nebo maximum-scale=1 dohromady s počáteční měřítko=1. Tím zakážete možnost škálování na webu (zap mobilní šablony Tato funkce se jistě může hodit, ale jen stěží...). Vzhledem k tomu, že zakážeme změnu měřítka, nebudeme mít možnost vidět celou stránku.
Osobně vám mohu doporučit jen jeden. Pokud vaše šablona není adaptabilní pro mobilní a jiná zařízení, velikosti obrazovky, které se liší od těch, pro které jste to udělali, ponechte možnost měnit měřítko a neměňte velikost měřítka.
Někteří lidé si myslí, že rolování doleva nebo doprava je velmi špatné a ošklivé. To samozřejmě není špatné, je to podle mě spíše nepohodlné, ale někdy je tato potřeba potřeba. Můj klient má například webové stránky. Má plnou a mobilní verzi, každá z těchto verzí je různé šablony. V souladu s tím v šabloně pro desktop nemá smysl dělat nějaké složité úpravy a zvony a píšťalky pro telefony, stačí tag viewport, ale v mobilu ano, vše je pro telefony. Tady to bude pro někoho pohodlnější, takříkajíc 2 alternativy... Díky všem, hodně štěstí!
Poslední aktualizace: 05/03/2016
Nejprve se podívejme na jeden z klíčových bodů aplikace adaptivní design- meta tag viewport (ve skutečnosti adaptivní design začíná tímto tagem). Začněme následující webovou stránkou:
Běžná webová stránka
Toto je standardní webová stránka, která by v normálním prohlížeči vypadala takto:
Pokud však stejnou webovou stránku spustíme na emulátoru mobilního zařízení nebo na reálném mobilní zařízení, pak sotva přečteme, co je na něm napsáno:
Použitím škálování může uživatel konečně vidět, co je tam napsáno. To však není příliš pohodlné. Webová stránka má zároveň spoustu prázdného místa, což není moc krásné.
Proč se tohle děje? Faktem je, že každý mobilní prohlížeč nastavuje nějaké počáteční velikosti stránky a poté se ji snaží přizpůsobit velikosti obrazovky aktuálního mobilního zařízení.
Celá viditelná oblast na obrazovce prohlížeče je popsána konceptem Viewport . Výřez v podstatě představuje oblast, kterou se webový prohlížeč snaží vměstnat do webové stránky. Například prohlížeč Safari na iPhonu a iPodu nastaví výchozí šířku výřezu na 980 pixelů. To znamená, že prohlížeč po přijetí stránky a jejím zadání do zobrazované oblasti o šířce 980 pixelů ji zkomprimuje na velikost mobilního zařízení. Pokud je například šířka obrazovky chytrého telefonu 320 pixelů, stránka se pak zkomprimuje na tuto velikost. A všechny prvky na stránce budou mít použitý faktor měřítka 320/980.
Proč je v tomto případě použito 980 pixelů a řekněme ne skutečná velikost obrazovky? Jde o to, že ve výchozím nastavení si prohlížeč myslí, že každá webová stránka je určena pro stolní počítače. A za obvyklou šířku webu pro stolní počítače lze považovat 980 pixelů.
V tomto případě si každý prohlížeč nastaví vlastní šířku oblasti výřezu, volitelně 980 pixelů. Jiné prohlížeče mohou podporovat různé hodnoty pro počáteční šířku. Ale budou také provádět škálování.
Abyste se tomuto nepříliš příjemnému obrázku vyhnuli, měli byste použít metaznačku výřezu. Má následující definici:
V atributu content meta tagu můžeme definovat následující parametry:
Parametr | Hodnoty | Popis |
Přijímá celočíselnou hodnotu v pixelech nebo hodnotu šířky zařízení | Nastaví šířku oblasti výřezu |
|
Přijímá celočíselnou hodnotu v pixelech nebo hodnotu výšky zařízení | Nastaví výšku oblasti výřezu |
|
Určuje faktor měřítka pro počáteční velikost výřezu. Hodnota 1,0 neurčuje žádné škálování |
||
Určuje, zda může uživatel používat gesta k přiblížení stránky |
||
Číslo s plovoucí desetinnou čárkou od 0,1 a výše | Nastaví minimální měřítko velikosti výřezu. Hodnota 1,0 neurčuje žádné škálování |
|
Číslo s plovoucí desetinnou čárkou od 0,1 a výše | Nastaví maximální měřítko velikosti výřezu. Hodnota 1,0 neurčuje žádné škálování |
Nyní upravme předchozí ukázkovou webovou stránku pomocí značky metadat:
Běžná webová stránka
Webová stránka rozhodně vypadá lépe díky použití meta tagu viewport. Pomocí parametru width=device-width sdělujeme webovému prohlížeči, že počáteční šířka výřezu by neměla být 980 pixelů nebo nějaké jiné číslo, ale skutečná šířka obrazovky zařízení. Takže webový prohlížeč nebude provádět žádné zoomování, protože máme stejnou šířku a šířku výřezu.
Můžeme také použít další možnosti, například zabránit uživateli ve změně velikosti stránky:
Stalo se, že se mobilní prohlížeče objevily relativně nedávno a v té době již byly v síti stránky velké množství. Všechny tyto weby přirozeně nebyly vůbec optimalizovány pro malé obrazovky smartphonů a smartphony byly zase nuceny věřit, že všechny weby jsou široké někde kolem 1000px (980px v Safari). Bylo potřeba nějak vyřešit aktuální situaci a Apple přišel s meta tagem , kterou podle tradice později ukradli všichni ostatní výrobci prohlížečů.
Podívejme se na typické epické rozložení webu:
html
Ahoj světe
Otevřeme jej v mobilním prohlížeči. Zde je to, co uvidíme:
Jak jste správně uvedl, text je příliš malý a stalo se to proto, že se safari snažilo přizpůsobit našemu webu (o kterém předpokládá, že je vytvořen pro prohlížeče s šířkou obrazovky asi 980 pixelů)
Řekněme nyní prohlížeči, že naše stránky reagují na jakoukoli šířku obrazovky.
html
Co se stalo:
No, teď je všechno mnohem lepší. Označením width=device-width jsme prohlížeči řekli, že chceme, aby se zobrazovaná oblast obsahu rovnala šířce obrazovky mobilního zařízení.
Hodnotu šířky můžete nastavit ručně. Například content="width=320px" , ale to se nedoporučuje, protože různé smartphony mohou mít úplně různé šířky obrazovky.
Velmi častou možností je:
html
tato volba nastavuje šířku stránky a počáteční měřítko (v tomto případě bez změny měřítka)
Často se také používá následující:
html
Takové hodnoty se použijí, pokud bude web používán a fungovat jako mobilní aplikace. Tito
- když se stránka načte, nezmění se její měřítko
- stránka zabere celou šířku mobilního prohlížeče
- jakékoli vlastní škálování je zakázáno
- k dispozici pouze horizontální a vertikální rolování
Tuto konfiguraci použijte, pouze pokud víte, co děláte.
Pojďme se podívat na platné parametry a jejich hodnoty dostupné v metaznačce viewport.
šířka
Celé číslo (od 200 px do 10 000 px) nebo „šířka zařízení“.
Nastaví šířku výřezu. Pokud není výřez nirina zadán, pak:
- pro mobilní safari je to 980 pixelů
- Opera – 850px
- Android WebKit – 800px
- IE – 974 pixelů
výška
Celé číslo (v rozmezí 223 až 10 000 pixelů) nebo „výška zařízení“
nastavuje výšku výřezu. V 99 % případů tento parametr prostě ignorujte, ale pokud ho opravdu potřebujete, zkoušejte a experimentujte. Hodně štěstí..
počáteční měřítko
1,0 - neškálovat. Nastavuje měřítko stránky. Zvýšit hodnotu - zvětšit měřítko.
uživatelsky škálovatelné
Dostupné hodnoty jsou ne nebo ano
Určuje, zda lze změnit měřítko stránky. Výchozí hodnota je yes v Safari.
minimální měřítko a maximální měřítko
Dostupné hodnoty (od 0,1 do 10).
1,0 - neškálovat. Určuje minimální a maximální měřítko výřezu.
Výchozí v mobilním Safari je minimální měřítko = "0,25" , maximální měřítko = "1,6".
Rada: Nepoužívejte meta tagy (včetně tohoto), dokud nepochopíte, proč je to všechno potřeba. A testujte vše jinak mobilní prohlížeče. Hodně štěstí!
Ahoj všichni, dnes budeme mluvit o co je výřez a jak ji používat.
Abyste pochopili, co to je, potřebujete nějaké mobilní zařízení. Nyní vytvoříme jednoduchý html stránka jako tato:
zkušební příspěvek
toto je testovací příspěvek
další příspěvek
to je docela fajn
nový příspěvek
Nyní otevřeme naši stránku na mobilním zařízení a co uvidíme? A uvidíme, že text je příliš malý a špatně čitelný. Pokud však ke značce přidáme následující tag obsahu hlava
Nyní text vypadá dobře. Zde je výkres. Vlevo bez visačky a vpravo s ní
Proč se tohle děje? Faktem je, že výchozí prohlížeč si myslí, že stránka je vytvořena pro desktopovou verzi prohlížeče, a snaží se ji zcela vměstnat do okna vašeho smartphonu. Nastavením tagu sdělujeme prohlížeči telefonu, že šířka pohledu se rovná šířce smartphonu. Tady je takový jednoduchý tag, který ale hodně pomáhá při tvorbě mobilní verze místo.
Můžete také nastavit měřítko. K tomu se používá počáteční měřítko
Pokud chcete uživateli zabránit v přibližování stránky na svém smartphonu, můžete napsat následující:
Ale musíte být opatrní, protože. stane se, že text je dost špatně čitelný a musíte ho zvětšit, ale pokud je to zakázáno, způsobíte uživateli nepříjemnosti.
Podpora prohlížeče
Podpora Androidu, ale až do verze 2.2 . počáteční měřítko je 1.0
Symbian, Nokia řady 40, Motorola, Opera mobile/mini a NetFront ne Podpěra, podpora
IE podporuje s 6 verze
BlackBerry podporuje od verze 4.2.1
Jak můžete vidět, podpora je stále neúplná, ale tuto značku již můžete použít, protože. většina nových smartphonů to již chápe.
Tím je tento článek uzavřen, děkuji za přečtení.
→ Přizpůsobení zařízení CSS pomocí @viewportKdyž si chceme přizpůsobit okno prohlížeče na našem zařízení, obvykle používáme HTML tag . Kupodivu však meta tag není „normativní“ – není v oficiálním standardu W3C.
Jako první byla implementována metaznačka viewport od společnosti Apple na iPhonu a poté od jiných prodejců prohlížečů. Dnes je široce používán díky popularitě iOS, Android a dalších platforem pro tablety a smartphony.
Vzhledem k tomu, že metaznačka viewport je čistě pro přizpůsobení značek, můžeme říci, že právem patří do CSS. Proto se W3C snaží o standardizaci nová metoda adaptace, ve které je ovládání oken přeneseno z HTML do CSS.
pravidlo @viewport css
S novým pravidlem @viewport máme stejné ovládání okna jako s meta tagem, až na to, že takové ovládání je čistě přes CSS. Stejně jako u značky metadat se doporučuje nastavit šířku okna prohlížeče pomocí šířky zařízení nezávislé na zařízení:
@viewport (width: device-width; )
Dnes @viewport používají programátoři pro "snap mode" v IE10 − funkce windows 8, což vám umožní pracovat v režimu více oken. Kupodivu IE10 ignoruje meta tag, pokud je velikost okna menší než 400px, což znemožňuje webům používajícím tento meta tag optimalizovat pro tak malá okna. Chcete-li to vyřešit, programátoři by měli použít parametr šířky zařízení uvedený výše nebo definovat pravidlo @viewport v dotazu na média.
Použití @viewport v dotazech na média
V mediálních dotazech můžeme použít @viewport. Například následující dotaz na média se používá k nastavení rozvržení okna, které je méně než 400 pixelů široké (např. režim více oken v IE10) na šířku 320 pixelů.
@media screen a (max. šířka: 400px) @-ms-viewport (šířka: 320px; ) ... )
V tento příklad, pokud je zařízení nastaveno na rozsah rozlišení 640 až 1024 pixelů, pravidlo @viewport změní měřítko okna na 640 pixelů.
@media screen and (min-width: 640px) a (max-width: 1024px) ( @viewport ( width: 640px; ) ... )
Nové úchyty @viewport
I když můžeme ovládat funkci zoom a zoom, některé vlastnosti výřezu – nebo jak se jim nyní říká „držadla“ – se změnily.
Zvětšení
Deskriptor zoomu je ekvivalentem počátečního měřítka v metaznačce. Kromě minimálního a maximálního měřítka existují deskriptory pro maximální přiblížení a minimální přiblížení:
@viewport ( width: device-width; zoom: 2; )
uživatelský zoom
Deskriptor uživatelského zoomu je ekvivalentní parametru škálovatelného uživatelem
@viewport ( width: device-width; user-zoom: fixed; )
Podpora prohlížeče
Ode dneška je pravidlo @viewport css podporováno pouze Opera a IE10. Vypadá to, že Chrome a další prohlížeče jej brzy implementují. Očekává se, že tato metaznačka se brzy stane novým oficiálním webovým standardem.
Prozatím musíte k pravidlu @viewport přidat předponu dodavatele:
@-ms-viewport ( width: device-width; ) @-o-viewport ( width: device-width; ) @viewport ( width: device-width; )
Samozřejmě stále musíme zahrnout metaznačku viewportu html stránku, protože v nejbližší době nikam nepůjde. Ale už není tak děsivé dívat se do budoucnosti – přidáním pravidla @viewport budou naše stránky a aplikace přátelské i do budoucna.