Viewport beállítása

A mobil eszközök böngészői a weboldalakat virtuális ablakokban jelenítik meg (viewport).

Ha ennek ebállítását a böngészőre bízzuk, akkor a weboldalunk tartalmát mobilon, rendszerint kicsinyített méretben jelenítik meg, amit aztán a felhasználó nagyíthat. Ekkor azonban az oldal tartamának csak kis részét látja. A keresett információ elérése érdekében szorgalmasan görgethet függőleges és vízszintes irányban egyaránt.

Mobilbarát weboldal esetén nem lehet vízszintes görgetés, ezért a viewport beállítása elkerülhetetlen. Ezt a dokumentumfejben (Head) meta címke segítségével tehetünk meg, a következő formában:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
 

width = a viewport szélessége. A device-width beállítással az aktuális eszköz kijelzőjének szélességét tudjuk megadni. (Megadható egy konkrét érték is. pl. 800px).

height = a viewport magassága.

device-height = a kijelző magassága

initial-scale = alapértelmezett nagyítási szint, ami az oldal első betöltésekor lesz érvényes.

maximum-scale = a maximális nagyítási szint.

minimum-scale = minimális nagyítási szint.

user-scalable = nagyítás engedélyezése (user-scalable="yes") vagy tiltása (user-scalable="no").