Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
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

  1. 1Vlož do <head> štandardný viewport meta tag.
  2. 2Nezakazuj zoom (maximum-scale=1 / user-scalable=no) — škodí to prístupnosti.
  3. 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