Čo je Viewport?
Viewport je viditeľná oblasť webstránky v okne prehliadača. Na mobilných zariadeniach je viewport kľúčový pre správne zobrazenie — meta tag viewport hovorí prehliadaču, ako má škálovať obsah.
Definícia Viewport
Definícia viewportu
Viewport (z angličtiny „zobrazovacia oblasť") je v počítačovej grafike polygonálna oblasť určená na zobrazovanie. Na webe viewport predstavuje viditeľnú časť webstránky v okne prehliadača — teda to, čo používateľ práve vidí bez scrollovania.
Podľa Wikipédie je viewport v podstate obdĺžniková oblasť vyjadrená v jednotkách zariadenia (pixeloch), do ktorej sa renderuje obsah. Koncept pochádza z počítačovej grafiky, kde viewport definuje 2D obdĺžnik na premietanie 3D scény.
Viewport na webe a mobilných zariadeniach
Na desktopovom počítači je viewport jednoducho veľkosť okna prehliadača. Na mobilných zariadeniach je to komplikovanejšie:
- Layout viewport — virtuálna šírka, v ktorej prehliadač renderuje stránku (často 980px na mobile)
- Visual viewport — časť stránky, ktorú používateľ aktuálne vidí na obrazovke
Bez správneho nastavenia viewportu mobilný prehliadač zobrazí desktopovú verziu stránky zmenšenú na malú obrazovku — text je nečitateľný a používateľ musí zoomovať.
Meta tag viewport
Problém sa rieši HTML meta tagom:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tento tag hovorí prehliadaču: „Nastav šírku viewportu na šírku zariadenia a nezmenšuj obsah." Je to základ responzívneho dizajnu — bez neho CSS media queries nefungujú správne na mobiloch.
Praktický príklad
Príklad: Webstránka kaviarni.
Bez viewport meta tagu: Na iPhone sa stránka zobrazí ako zmenšená desktopová verzia — text má 4px, tlačidlá sú mikroskopické, zákazník musí dvoma prstami zoomovať, aby prečítal menu. Väčšina ľudí rovno odíde.
S viewport meta tagom: Stránka sa automaticky prispôsobí šírke telefónu. Text je čitateľný, tlačidlo „Objednať" je dostatočne veľké na ťuknutie prstom, menu sa zobrazí v jednom stĺpci.
Dôležité: Google vyžaduje správne nastavený viewport pre mobile-first indexovanie. Bez neho stránka stráca pozície v mobilnom vyhľadávaní.
Často kladené otázky
Čo je viewport?
Viewport je viditeľná oblasť webstránky v okne prehliadača. Na desktope je to veľkosť okna, na mobile je to veľkosť obrazovky zariadenia. Správne nastavenie viewportu je kľúčové pre responzívny dizajn.
Prečo je viewport meta tag dôležitý?
Bez viewport meta tagu mobilný prehliadač zobrazí stránku v desktopovej šírke (často 980px) a zmenší ju na malú obrazovku. S tagom sa stránka prispôsobí skutočnej šírke zariadenia.
Ako nastaviť viewport pre mobilné zariadenia?
Pridajte do hlavičky HTML kód: <meta name="viewport" content="width=device-width, initial-scale=1">. Toto zabezpečí správne škálovanie na všetkých zariadeniach.
Aký je rozdiel medzi layout viewport a visual viewport?
Layout viewport je virtuálna šírka, v ktorej prehliadač renderuje stránku. Visual viewport je časť stránky viditeľná na obrazovke. Na mobile sa môžu líšiť — napríklad pri zoomovaní.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.