Meta Viewport

Meta viewport je informace, která slouží k vykreslení layoutu webu. Používá se proto, aby se webová prezentace nezobrazovala na displejích mobilních zařízení stejně jako na monitorech desktopů a notebooků. Pokud u klasického webu není značka použita, zobrazí se web na mobilech stejným způsobem jako na velkém displeji. To vede k tomu, že na mobilu musíte zoomovat jak smyslů zbavení, abyste si vůbec něco přečetli.

Pokud ji tedy nepoužijete (nebo jinak neošetříte viditelnost na mobilu), dojde k předání signálu vyhledávačům, že web je méně použitelný na mobilních zařízeních, což samozřejmě ocení zejména Google mobile jako prohřešek vůči uživatelům a jejich komfortu.

Přístupný web CVUT
Test mobilní přístupnosti v pořádku
Státní správa bez viewport
Test mobilní přístupnosti fail

Implementace Meta viewport

Implementace je velmi snadná. Jedná se o jednořádkový zápis meta tagu v oblasti <head> za pomoci HTML Vložení je tedy stejné jako u ostatních meta informací. Příklad nasazení následuje:

Parametry meta viewport

  • width

    Šířka zobrazení. Můžete zadat šířku zobrazení „natvrdo“. Výhodou je, že pak přesně víte, jak bude prezentace vypadat na daném mobilním zařízení, které disponuje právě touto velikostí. Nevýhodou je, že v dnešní době na trhu existuje mnoho velikostí zařízení, takže když to na jednom bude vypadat dobře (čitelně) na druhém si nepomůžete. Proto je dobré spíše dynamicky upravovat viditelnost následujícím parametrem.

  • device-width

    Zde říkáte, že šířka je rovna fyzické šířce displeje používaného zařízení. Tudy cesta vede. Nikdo neví, jaké displeje se budou používat za rok či dva.

  • height

    Zde platí to stejné co se šířkou zobrazované oblasti. Pokud chcete optimalizovat naopak na výšku a to na přesnou velikost, použijete tento parametr.

  • device-height

    Stejný stav jako u šířky. Netušíte jaké zařízení budou uživatelé používat, nechte tedy přizpůsobit zobrazení dynamicky dle jeho velikosti displeje.

  • initial-scale

    Úvodní přiblížení říká, zda se má obsah rovnou přiblížit (oddálit). Je to stejné, jako když na zařízení použijete dva prsty ke změně zoomu. Hodnota „1“ pak říká, že se má obsah zobrazit defaultně bez přiblížení. Můžete použít dokonce setiny (např. 0,87 nebo 1,23 apod.)

  • minimum-scale

    Vám umožňuje omezit minimální přiblížení uživatelům. Hodnoty jsou stejné jako u initial-scale.

  • maximum-scale

    Maximální hodnota přiblížení. Pokud chcete omezit uživatele, jak mohou maximálně zoomovat. Stejné parametry jako u předchozích příkladů „scale“.

  • user-scalable

    Zde můžete uživatelům zakázat přiblížení/oddálení úplně. Povolené hodnoty jsou tedy Ano/Ne (Yes/No). Pokud hodnotu nepoužijete, defaultně umožňujete zoom, což také velmi doporučujeme z hlediska použitelnosti.

  • user-zoom

    Umožňuje uživatelské nastavení zoom faktoru.

  • viewport-fit

    Umožňuje ovládání chování na nepravidelných displejích.

  • orientation=portrait

    Aplikování pravidla pro prohlížeče, jejichž výška je větší než šířka.

  • orientation=landscape

    Pro prohlížeče, jejichž šířka je větší než výška.

CSS – Meta viewport

Pro úplnost nám schází ještě odpovídající zápis v kaskádových stylech. Microsoft musí mít jako vždy něco extra a tak doporučuje striktní zápis s rozměry:

Copy to Clipboard

Trošku přesnější příklad pro podchycení CSS:

Copy to Clipboard

A co na to strýček Google? Můžete se podívat na oficiální nastavení na webu Google ohledně nastavení meta portview v článku (EN): Responsive Web Design Basic .

Specialitka Apple

Stejně jako Microsoft i Apple má své specialitky. Protože Apple používá i jiné displeje, než jsou klasické obdélníkové, ale v nových zařízeních používá zaoblené rohy (aby využil plnou velikost zařízení), může se nám stát, že se některé prvky skládají mimo zobrazenou oblast. To má za následek přepočítání velikosti displeje a následnou úpravu velikosti viewportu. Tento stav se nachází například u iPhone X nebo Apple Watch. Prakticky se nám to objeví pokud používáme prezentace s různým pozadím, které se rozlévá po celé šíři prostoru.

Tento stav můžeme ošetřit jednoduchým parametrem „viewport-fit=cover“.

Pokud nepoužíváte barevné pozadí, tak to můžete ignorovat.

Meta viewport z hlediska SEO

Jak bylo řečeno v úvodu článku, jde o použitelnost webu. Vyhledávače se dnes dívají na stránky nejen z hlediska technického, ale i uživatelského. Rádi by posuzovaly, zda jsou subjektivně weby dostatečně přívětivé pro uživatele a zařadily to do své sbírky faktorů posouzení kvality webu. Částečně je k tomu dohnaly nekalé praktiky v SEO. Takzvané Black hat SEO, kdy se začal používat skrytý obsah (ať již barvou nebo velikostí) nebo i různá vnucená přesměrování. A částečně proto, že se chtějí podobat názoru lidí.

Z toho nám plyne základní pravidlo pro všechny SEO aktivity i do budoucna.

Chcete, aby to bylo dobré pro vyhledávače? Musí to být dobré pro člověka! 

Chcete se dozvědět o dalších meta tazích, které ovlivňují SEO? Podívejte se na článek Meta tagy.