Na čo je potrebný viewport vo webovom vývoji?

Zobrazenie oblasti (viewport) je viditeľná časť webovej stránky v prehliadači. Určuje rozmery a mierku obsahu, ktorý sa používateľovi zobrazuje. Bez neho by stránky mohli byť nesprávne zobrazené na rôznych zariadeniach, od desktopov po smartfóny.

Hlavnou funkciou je prispôsobenie rozloženia stránky rozmerom obrazovky zariadenia. Pomocou meta tagu viewport je možné kontrolovať šírku a mierku obsahu.

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

• width=device-width: Nastaví šírku okna zobrazenia na šírku zariadenia.
• initial-scale=1.0: Určuje počiatočnú úroveň priblíženia pri načítaní stránky. Jednotka znamená bez priblíženia (100%).

Použitie viewport je úzko spojené s technológiami responzívneho dizajnu, ako sú CSS media queries, ktoré umožňujú aplikovať rôzne štýly v závislosti od veľkosti okna zobrazenia.