UX / UI Kritický dopad Snadné 2 min

Viewport / mobilní zobrazení

Meta viewport zajišťuje správné zobrazení na mobilu.

Co to je

Meta tag viewport říká prohlížeči, jak škálovat stránku na šířku zařízení. Bez něj mobil vykreslí desktopovou šířku a vše je „malé a oddálené".

Proč to řešit

Google indexuje mobile-first: hodnotí primárně mobilní verzi. Bez správného viewportu web propadne v testu použitelnosti na mobilu, což přímo sráží pozice, protože většina návštěv je z mobilů.

Jak na to

1Vlož do <head> standardní viewport meta tag.
2Nezakazuj zoom (maximum-scale=1 / user-scalable=no), škodí to přístupnosti.
3Ověř, že se obsah nepřetéká vodorovně a tlačítka jsou dost velká (viz UX audit).

Příklad

Správně

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

Závěr

Jeden řádek v hlavičce, ale zásadní pro mobile-first svět. Bez něj je web na mobilu prakticky nepoužitelný a Google to tvrdě penalizuje. Po nasazení otestuj na reálném telefonu i v nástroji pro mobilní použitelnost.

Související témata