Vše o meta značce pro viewport

Naposledy upraveno: 1. 2. 2016 – Autor: Martin Michálek

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

Obrázek: Po vložení meta značky pro viewport se z desktopového rozlišení stane mobilní

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 rozlišení v CSS pixelech.

Jednoduchá varianta

Dnes už nebude takový problém, pokud použijete následující zápis:

<meta name="viewport" content="width=device-width">

Když byste ale moc stáli o podporu všech starších a méně významných kontextů (iOS 8, Windows Phone) volte spíše následující verzi.

Varianta s podporou všech zařízení

V HTML hlavičce:

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

Bez initial-scale=1 totiž Safari na iOS 8 a starších renderuje stránku do rozlišení jako by bylo otočené na výšku, i když jej používáme na šířku.

Teoreticky dělá initial-scale=1 na všech zařízeních totéž co width=device-width, ale bez toho druhého chybuje Internet Explorer na mobilních Windows 8 stejným způsobem jako osmá a starší verze mobilního operačního systému od Apple.

Jak už jsem na začátku textu naznačil – svět se nezboří, když na tohle zapomenete. Mobilní Windows jsou v roce 2018 i z pohledu uživatelské základny prakticky mrtvá platforma. iOS 8 a starší je podobný případ.

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. Jak už jsem psal: Pokud chcete maximální kompatibilitu, uvádějte oba dva.

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 světelný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 a novějších navíc zákaz zoomování úplně ignoruje.

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. Opět naléhám – prosím, nepoužívejte to.

shrink-to-fit

Pokud nějaké prvky pozicujete částečně mimo viewport (například pomocí position: absolute), na zařízeních s iOS se vizuální viewport přepočítá tak, aby se zobrazil i onen pozicovaný element.

Může se ale stát, že si to takhle nepřejete. Třeba jen chcete, aby byl element částečně ořízlý a mimo viewport. Od iOS 9 můžete použít deklaraci shrink-to-fit=no, kterou to zařídíte.

Hezky je to vysvětlené na Stack Overflow, i s ukázkou v CodePen: https://stackoverflow.com/a/33949647/889682

Váš meta tag pro viewport by pak měl vypadat takto:

<meta name="viewport"
  content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

viewport-fit

Nová vlastnost, která řeší způsob zobrazování na zařízeních s jinou než hranatou obrazovkou. Jako příklad vezměme chytré hodinky nebo iPhone X. Vlastnost může mít následující hodnoty (už znáte z background-size):

  • auto - výchozí stav, který vše nechává na prohlížeči. U iPhone X například odpovídá hodnotě contain.
  • contain - zmenší viewport pro stránku tak, aby byla vidět celá. Jakou barvu vykreslí po stranách, záleží na prohlížeči. iPhone X v background-color z body.
  • cover - roztáhne viewport pro stránku tak, aby nikde „nevyčuhovaly“ neobarvené části rozhraní prohlížeče. S tím rizikem, že kulaté rohy nebo výčnělky na displeji zařízení některé části stránky překryjí.
Viewport Fit

Pokud má stránka různobarevné pozadí, jako Vzhůru dolů, hodí se do meta značky přidat ještě viewport-fit=cover

Více o tom píšu v článku o iPhone X.

Stručné řešení pro vaše weby: Pro layout s jednobarevným pozadím si jen zkontrolujte nastavení background-color na body. Pro weby s různobarevnými prvky zabírajícími celou šířku si přidejte parametr do meta značky pro viewport:

<meta name="viewport"
  content="width=device-width, viewport-fit=cover">

Tipy, triky, zajímavosti

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í prodlevy mezi tapnutím a akcí trvající 300 ms

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

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šlo W3C, ale moderní prohlížeče jej zatím nezvládají. Výjimkou je Internet Explorer 11 a Edge, kde je to ale potřeba zapnout. Pravidlo tedy využívá jen IE11 v takzvaném „snap“ módu na desktopových Windows. V roce 2018 to tedy podle mě k ničemu není. Psal jsem o tom ve starším článku.

Weby na WatchOS – pokud máte web optimalizovaný pro viewporty menší než 320px

Chytré hodinky od Appple vynucují zobrazení našich webových dílek na zápěstí uživatelů ve viewportu širokém 320 CSS pixelů. Pokud bychom tomu chtěli zabránit a zobrazit je ve výchozím CSS rozlišení (o šířce 272 nebo 312 pixelů podle typu hodinek), musíme si dupnout následujícím kódem:

<meta name="disabled-adaptations" content="watch">

Vtipné je, že WatchOS ve výchozím režimu vynucují přepočítaný viewport uvnitř přepočítaného viewportu. Ale co už – my léta víme, že viewporty na mobilních zařízeních jsou jako teorie relativity. Vím, že existují, víme že jsou složité, ale skoro nikdo jim přesně nerozumí.

Komentáře