Vše o meta značce pro viewport

Zjednodušeně (ale lidsky) řečeno slouží k informování prohlížeče o tom, zda a jak jste web připravili pro mobilní zařízení.

Meta Viewport

Bez použití meta značky se web vykreslí do výchozího layoutového viewportu, který má většinou šířku 980 pixelů. Web bude vypadat „jako na počítači, jen zmenšený“. S použitím meta značky pro viewport se šířka layoutového viewportu nastaví na velikost ideálního CSS rozlišení

Začnu bez vysvětlování zápisem meta tagu pro viewport, který je v pořádku:

<meta name="viewport" 
  content="width=device-width, initial-scale=1">

K tomu si do CSS doplňte:

@-ms-viewport { 
  width: device-width; 
}

Tohle vám u drtivé většiny responzivních webů bude stačit. Pokud ale máte chvilku času navíc, pojďte se o meta značce dozvědět něco víc.

Parametry meta značky pro viewport

Do atributu content je možné dávat různé vlastnosti a jejich hodnoty.

width

Nastaví šířku layoutového viewportu v pixelech. Nejčastěji využívaná hodnota device-width sjednotí šířku layoutového viewportu se šířkou ideálního viewportu. Takže uživatel nebude muset zoomovat a vaši responzivní stránku uvidí jedna ku jedné. Pokud použijete hodnotu, např. width=400, nastavíte šířku layoutového viewportu na 400 pixelů. Nenapadá mě ale moc rozumných důvodů, proč to dělat.

initial-scale

Nastaví výchozí zoom, ale také šířku layoutového viewportu. Ve výsledku dělá zápis initial-scale=1 totéž jako width=device-width, jenže kvůli drobným prohlížečovým nekompatibilitám musíme uvádět oba. Za chvíli o tom píšu.

user-scalable

Hodnota no zakazuje uživateli jakkoliv zoomovat. Prosím, nepoužívejte ji. Zoomování je na mobilních zařízení fakt potřeba. Ať už jde o zvětšení textu v horších podmínkách, nebo jen touhu vidět detaily z nějakého obrázku, přibližování obsahu prostě potřebují všichni uživatelé. Safari na iOS 10 navíc zákaz zoomování úplně ignorují.

minimum-scale/maximum-scale

Minimální a maximální možný zoom. maximum-scale=1 ruší možnost přiblížení stejně jako user-scalable=no. Prosím, nepoužívejte to.

shrink-to-fit

Pokud by váš layout bláznil na iPadech s iOS od verze 9, zkuste ještě přidat atribut s hodnotou shrink-to-fit=no. Proč? To vlastně skoro nikdo neví. Maximiliano Firtman o tom píše v textu „The new viewport shrink-to-fit attribute (that nobody understands)“. vrdl.in/xpub9

Proč width=device-width a zároveň initial-scale=1?

Jak už jsem psal, width=device-width je instrukce pro sjednocení layoutového viewportu s ideálním.

width=device-width má ovšem jednu známou nevýhodu: Safari na iOS pak jako ideální viewport v režimu zobrazení na šířku použije ideální viewport pro výšku. Ano, přesně tohle je příčinou toho problému se „zvětšováním“ stránky v landscape režimu na iOS.

Je zde jedna záchrana: použít namísto toho zápis initial-scale=1. Světe, div se, na všech mobilních zařízeních má ten samý efekt jako width=device-width. Světe, div se, podruhé, Safari na iOS už v režimu landscape renderuje do ideálního landscape viewportu. A světe, div se, má to svoje nevýhody! Internet Explorer se na mobilních Windows 8 totiž začne chovat úplně stejně špatně jako mobilní Safari.

Nevadí. Problémy vyřešíme tím, že použijeme obě hodnoty.

Zavináčové pravidlo @viewport v CSS

Instrukce pro způsob zobrazování by se měla dávat do CSS, že ano? S logičtěji umístěným zápisem @viewport { } přišla Opera, která ovšem následně zběhla k renderovacímu jádru Blink, takže jej už zase nejspíš neumí. V praxi je ten zápis nyní potřeba hlavně pro Internet Explorer na Windows Phone 8. vrdl.cz/p/viewport-windows

Meta viewport raději moc nenastavujte Javascriptem

Hodí se to, jen když nemáte přístup do <head>. Teoreticky jde Javascriptem meta značka pro viewport i měnit, ale nedělejte to. Je to náročné na překreslování stránky. Vyrobte raději normální responzivní web s jedním meta tagem pro viewport.

Odstranění 300ms prodlevy

Když budete mít viewport nastavený správně, s hodnotou width, aktuální prohlížeče postavené na jádrech WebKit a Blink samy odstraní prodlevu mezi tapnutím a akcí. Starší prohlížeče prodlevu dělaly proto, že po tapnutí prstem čekaly, zda nepřidáte prst druhý a nemáte tedy v úmyslu stránku zvětšovat. Více si o tom můžete přečíst na blogu vývojářů WebKitu. vrdl.in/l72eg

Komentáře