Použití metaznačky viewport k ovládání rozvržení v mobilních prohlížečích. Použití metaznačky viewport v neresponzivních šablonách

Když 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(
šířka:šířka zařízení;
}

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. K vyřešení tohoto problému by programátoři 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 obrazovka a (max. šířka: 400 pixelů) (
@-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 obrazovka a (minimální šířka: 640 pixelů) a (maximální šířka: 1024 pixelů) (
@viewport ( šířka: 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í

Rukojeť 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(
šířka:šířka zařízení;
zoom: 2;
}

uživatelský zoom

Deskriptor uživatelského zoomu je ekvivalentní parametru škálovatelného uživatelem

@viewport(
šířka:šířka zařízení;
uživatelský zoom: pevný;
}

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(
šířka:šířka zařízení;
}
@-o-viewport(
šířka:šířka zařízení;
}
@viewport(
šířka:šířka zařízení;
}

Samozřejmě stále musíme zahrnout metaznačku viewportu html stránku, protože v nejbližší době nikam nepůjde. Ale dívat se do budoucnosti už není tak děsivé – přidáním pravidla @viewport jsou naše weby a aplikace připraveny na změnu

Obecná chyba

Častou chybou je, že vývojáři často používají initial-scale=1 pro neresponzivní šablony. Toto nastavení vykreslí 100 % stránky bez změny měřítka. Pokud design nereaguje, musí uživatel buď hodně rolovat, nebo ručně nastavit zoom, aby viděl celou stránku. Nejhorším případem je kombinace user-scalable=no nebo maximum-scale=1 s initial-scale=1. Tím je možnost škálování na webu zakázána. A bez změny měřítka neexistuje způsob, jak zobrazit celou stránku. Pokud vaše šablona nereaguje, nevypínejte změnu měřítka a neresetujte počáteční měřítko!

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 skutečném mobilním zařízení, jen stěží přečteme, co je na ní 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ň mnoho prázdné místo což není moc hezké.

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 zařízeních iPone a iPod definuje výchozí šířku výřezu 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č dovnitř tento případ je použito přesně 980 pixelů, ale řekněme ne skutečné velikosti obrazovka? 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:

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. značka výřezu. 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:

Není pochyb o tom, že při práci s metaznačkou viewport používáte adaptivní šablony. Věděli jste ale, že metaznačka viewport může být užitečná i pro neresponzivní šablony? Pokud nemáte čas převést šablonu projektu na responzivní, měli byste si přečíst tento návod, jak pomocí metaznačky viewport zlepšit vzhled vašeho návrhu na mobilních zařízeních.

Běžné použití metaznačky viewport

Obvykle se metaznačka viewport používá k nastavení šířky a počátečního měřítka pro viewport na mobilních zařízeních. Zde je příklad.

Použití metaznačky viewport v neresponzivní šabloně

Ve výchozím nastavení je šířka výřezu na iPhonu nastavena na 980 pixelů. Ale váš design nemusí dobře odpovídat této řadě. Hodnota může být pro šablonu příliš velká nebo příliš malá. Níže jsou uvedeny dva příklady. které používají metaznačku viewport ke zlepšení vzhledu neresponzivní šablony na mobilních zařízeních.

Příklad

Prohlížejte si web Themify z mobilního zařízení.

Snímek obrazovky vlevo ukazuje vzhled web bez použití metaznačky viewport. Můžete si všimnout, že se stránka dotýká obou stran obrazovky. Pokud přidáte metaznačku viewport o šířce 1024px, bude vlevo a vpravo mezera.

Další příklad

Pokud je váš design příliš úzký, bude také vypadat neohrabaně. Řekněme, že šířka kontejneru je 700px a nepřizpůsobí se. V tomto případě bude vzhled vypadat jako na obrázku níže vlevo - široký bílý pruh vlevo.

Problém lze snadno vyřešit nastavením šířky výřezu na 720 pixelů. Šířka provedení se nemění, ale mobilní zařízení zmenší to na 720px.

Obecná chyba

Častou chybou je, že vývojáři často používají initial-scale=1 pro neresponzivní šablony. Toto nastavení vykreslí 100 % stránky bez změny měřítka. Pokud design nereaguje, musí uživatel buď hodně rolovat, nebo ručně nastavit zoom, aby viděl celou stránku. Nejhorším případem je kombinace user-scalable=no nebo maximum-scale=1 s initial-scale=1 . Tím je možnost škálování na webu zakázána. A bez změny měřítka neexistuje způsob, jak zobrazit celou stránku. Pokud vaše šablona nereaguje, nevypínejte změnu měřítka a neresetujte počáteční měřítko!

Není pochyb o tom, že při práci s responzivními šablonami používáte metaznačku viewport. Věděli jste ale, že metaznačka viewport může být užitečná i pro neresponzivní šablony? Pokud nemáte čas převést šablonu projektu na responzivní, měli byste si přečíst tento návod, jak pomocí metaznačky viewport zlepšit vzhled vašeho návrhu na mobilních zařízeních.

Běžné použití metaznačky viewport

Obvykle se metaznačka viewport používá k nastavení šířky a počátečního měřítka pro viewport na mobilních zařízeních. Zde je příklad.

Použití metaznačky viewport v neresponzivní šabloně

Ve výchozím nastavení je šířka výřezu na iPhonu nastavena na 980 pixelů. Ale váš design nemusí dobře odpovídat této řadě. Hodnota může být pro šablonu příliš velká nebo příliš malá. Níže jsou uvedeny dva příklady. které používají metaznačku viewport ke zlepšení vzhledu neresponzivní šablony na mobilních zařízeních.

Příklad

Prohlížejte si web Themify z mobilního zařízení.

Levý snímek obrazovky ukazuje, jak web vypadá bez použití metaznačky viewport. Můžete si všimnout, že se stránka dotýká obou stran obrazovky. Pokud přidáte metaznačku viewport o šířce 1024px, bude vlevo a vpravo mezera.

Další příklad

Pokud je váš design příliš úzký, bude také vypadat neohrabaně. Řekněme, že šířka kontejneru je 700px a nepřizpůsobí se. V tomto případě bude vzhled vypadat jako na obrázku níže vlevo - široký bílý pruh vlevo.

Problém lze snadno vyřešit nastavením šířky výřezu na 720 pixelů. Šířka designu se nemění, ale mobilní zařízení ji zvětší na 720px.

Obecná chyba

Častou chybou je, že vývojáři často používají initial-scale=1 pro neresponzivní šablony. Toto nastavení vykreslí 100 % stránky bez změny měřítka. Pokud design nereaguje, musí uživatel buď hodně rolovat, nebo ručně nastavit zoom, aby viděl celou stránku. Nejhorším případem je kombinace user-scalable=no nebo maximum-scale=1 s initial-scale=1 . Tím je možnost škálování na webu zakázána. A bez změny měřítka neexistuje způsob, jak zobrazit celou stránku. Pokud vaše šablona nereaguje, nevypínejte změnu měřítka a neresetujte počáteční měřítko!

Metaznačka viewport je zodpovědná za zobrazovanou oblast webu na obrazovce. Jednoduše řečeno, toto je nastavení šířky obrazovky pro daný web. Například stránka na monitoru PC bude vypadat správně, ale na smartphonu bude špatně čitelná, protože. příliš malé písmo.

K vyřešení problému zobrazování webu v malých rozlišeních prohlížečů byl vynalezen nový směr - adaptivní rozvržení webu, aby byl web vhodný pro uživatele s různými šířkami prohlížeče.

Metaznačka viewport umožňuje nastavit šířku zobrazované oblasti a měřítko stránky. Podle definice je výřez viditelné pro uživatele oblast webu bez rolování.

... ...

Výše byly zadány pouze dva atributy width a initial-scale , které jsou zodpovědné za šířku a měřítko. Můžete také zadat další parametry oddělené čárkami. Zvažte všechny možné atributy.

• width – nastavuje šířku výřezu prohlížeče. Nabývá celočíselné hodnoty (mezi 200 a 10 000) v pixelech nebo šířce zařízení . Tento atribut je povinný pro adaptivní rozvržení místo.
• výška – nastavuje výšku výřezu prohlížeče. Přijímá celočíselnou hodnotu v pixelech (od 200 do 10 000) nebo hodnotu výšky zařízení. Vzhledem k tomu, že určujícím faktorem je šířka, není výška pro adaptivní uspořádání nutná.
• initial-scale - faktor měřítka. Přijímá skutečné hodnoty (od 0,1 do 10,0). Hodnota "1.0" je výchozí, což znamená, že každý fyzický pixel odpovídá hardwarovému pixelu.
• user-scalable – nastavuje, zda uživatel může škálovat stránku. Nabývá dvou hodnot: ne/ano
• minimální měřítko - nastavuje minimální měřítko. Měří se v reálných číslech.
• maximum-scale - nastavuje minimální měřítko. Měří se v reálných číslech.

Příklady výřezů

Nové smartphony mají vysoké rozlišení. V tomto ohledu je nutné zpřesnit atribut initial-scale, který je zodpovědný za škálování. Faktem je, že provedením měřítka 1,0 docílíme příliš malého textu, který nelze přečíst. Následující tabulka proto platí při škálování pro zařízení s vysoká hustota pixelů.