UX / UI Kritikus hatás Egyszerű 2 perc

Viewport / mobil megjelenítés

A meta viewport biztosítja a helyes megjelenítést mobilon.

Mi ez

A viewport meta tag megmondja a böngészőnek, hogyan skálázza az oldalt az eszköz szélességéhez. Nélküle a mobil asztali szélességgel rendereli, és minden „kicsi és távoli”.

Miért foglalkozzon vele

A Google mobile-first módon indexel, elsősorban a mobil verziót értékeli. Helyes viewport nélkül az oldal megbukik a mobil használhatósági teszten, ami közvetlenül rontja a pozíciókat, mivel a látogatások többsége mobilról érkezik.

Hogyan csinálja

1Illeszd a <head>-be a standard viewport meta taget.
2Ne tiltsd a zoomot (maximum-scale=1 / user-scalable=no), árt az akadálymentességnek.
3Ellenőrizd, hogy a tartalom nem folyik túl vízszintesen, és a gombok elég nagyok (lásd UX audit).

Példa

Helyesen

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

Összegzés

Egy sor a fejlécben, de alapvető a mobile-first világban. Nélküle az oldal mobilon gyakorlatilag használhatatlan, és a Google ezt keményen bünteti. Telepítés után tesztelj valódi telefonon és a mobil használhatósági eszközben is.

Kapcsolódó témák