UX / UI Kritický dopad Ľahké 2 min

Viewport / mobilné zobrazenie

Meta viewport zaisťuje správne zobrazenie na mobile.

Čo to je

Meta tag viewport hovorí prehliadaču, ako škálovať stránku na šírku zariadenia. Bez neho mobil vykreslí desktopovú šírku a všetko je „malé a oddialené“.

Prečo to riešiť

Google indexuje mobile-first: hodnotí primárne mobilnú verziu. Bez správneho viewportu web prepadne v teste použiteľnosti na mobile, čo priamo zráža pozície, pretože väčšina návštev je z mobilov.

Ako na to

1Vlož do <head> štandardný viewport meta tag.
2Nezakazuj zoom (maximum-scale=1 / user-scalable=no), škodí to prístupnosti.
3Over, že sa obsah nepretekáva vodorovne a tlačidlá sú dosť veľké (pozri UX audit).

Príklad

Správne

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

Záver

Jeden riadok v hlavičke, ale zásadný pre mobile-first svet. Bez neho je web na mobile prakticky nepoužiteľný a Google to tvrdo penalizuje. Po nasadení otestuj na reálnom telefóne aj v nástroji pre mobilnú použiteľnosť.

Súvisiace témy