Do czego służy viewport w tworzeniu stron internetowych?

Widok portu to widoczny obszar strony internetowej w przeglądarce. Określa rozmiar i skalę wyświetlanej zawartości. Bez niego strony mogłyby być niepoprawnie wyświetlane na różnych urządzeniach, od komputerów stacjonarnych po smartfony.

Jego głównym zadaniem jest dostosowanie układu strony do rozmiarów ekranu urządzenia. Za pomocą meta-tag viewport można kontrolować szerokość i skalowanie zawartości.

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

• width=device-width: Ustawia szerokość okna widoku na szerokość ekranu urządzenia.
• initial-scale=1.0: Ustawia początkowy poziom powiększenia podczas ładowania strony. Jednostka oznacza brak powiększenia (100%).

Użycie viewport jest ściśle powiązane z technologiami responsywnego projektowania, takimi jak media queries CSS, które pozwalają na stosowanie różnych stylów w zależności od rozmiaru okna widoku.