Az HTML viewport beállítás olyan metaelem, amely segítségével megadhatjuk, hogyan jelenjen meg az oldal a böngészőben, ha olyan eszközön nézzük, amelynek a képernyőmérete kisebb, mint az oldal mérete. A viewport beállítást általában a weboldal head elemében helyezzük el. Például:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ebben az esetben a viewport beállítás megadja, hogy a weboldal szélessége legyen a készülék szélessége, és az alapértelmezett nagyítási méret 1 legyen.
A viewport beállításban további opciókat is megadhatunk, például a minimális és maximális nagyítási méretet, a képarányt és más beállításokat. Például:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2">
Ebben az esetben a viewport beállítás megadja, hogy a weboldal szélessége legyen a készülék szélessége, az alapértelmezett nagyítási méret 1 legyen, és a minimális nagyítási méret 0,5, míg a maximális nagyítási méret 2 legyen.
Ezzel a viewport beállítással biztosíthatjuk, hogy a weboldal megfelelően jelenjen meg a különböző eszközökön, és a felhasználók ne tudják túl nagyra vagy túl kicsire nagyítani az oldalt.
Az HTML viewport beállításban megadhatjuk a képarányt is. A képarány a kép szélességéhez és magasságához viszonyított aránya. Például:
<meta name="viewport" content="width=device-width, initial-scale=1, aspect-ratio=16/9">
Ebben az esetben a viewport beállítás megadja, hogy a weboldal szélessége legyen a készülék szélessége, az alapértelmezett nagyítási méret 1 legyen, és a képarány 16/9 legyen.
Ezzel a viewport beállítással biztosíthatjuk, hogy a weboldal megfelelően jelenjen meg a különböző eszközökön, és a kép aránya megfelelő legyen a készülék képernyőjéhez viszonyítva.
Az HTML viewport beállításban megadhatjuk a forgatási lehetőségeket is. A forgatási lehetőségek segítségével megadhatjuk, hogy milyen irányban lehet forgatni a képernyőt. Például:
<meta name="viewport" content="width=device-width, initial-scale=1, orientation=portrait">
Ebben az esetben a viewport beállítás megadja, hogy a weboldal szélessége legyen a készülék szélessége, az alapértelmezett nagyítási méret 1 legyen, és az irány álló legyen.
Ezzel a viewport beállítással biztosíthatjuk, hogy a weboldal megfelelően jelenjen meg a különböző eszközökön, és csak álló irányban lehessen forgatni a képernyőt.
A fekvő irány orientation=landscape beállítással adható meg.
Az HTML viewport beállítás nagyon fontos része az HTML dokumentumnak, mert segítségével biztosíthatjuk, hogy a weboldal megfelelően jelenjen meg olyan eszközökön is, amelyeknek a képernyőmérete kisebb, mint az oldal mérete. Így a weboldalunkat böngészőfüggetlené tehetjük, és tökéletesen megjelenhetnek a különböző eszközökön.