Na co je potřeba viewport ve webovém vývoji?

Zobrazení oblasti (viewport) je viditelná část webové stránky v prohlížeči. Určuje rozměry a měřítko obsahu, který je uživateli zobrazen. Bez něj by stránky mohly být nesprávně zobrazeny na různých zařízeních, od desktopů po chytré telefony.

Hlavním účelem je přizpůsobit rozložení stránky rozměrům obrazovky zařízení. Pomocí meta tagu viewport lze kontrolovat šířku a měřítko obsahu.

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

• width=device-width: Nastaví šířku okna zobrazení na šířku zařízení.
• initial-scale=1.0: Určuje počáteční úroveň přiblížení při načtení stránky. Jednotka znamená bez přiblížení (100%).

Použití viewport je úzce spojeno s technologií responzivního designu, jako jsou CSS media queries, které umožňují aplikovat různé styly v závislosti na velikosti okna zobrazení.