Viewport

Viewport to widoczny obszar strony w oknie przeglądarki na danym urządzeniu — prostokąt, w którym renderowana jest treść, zanim użytkownik zacznie przewijać. Jego rozmiar zależy od ekranu i okna: inny jest na monitorze komputera, inny na tablecie, a jeszcze inny na telefonie. Od wymiarów viewportu zależy, ile treści widać naraz i jak układa się responsywny layout.

Meta viewport

Na urządzeniach mobilnych kluczową rolę odgrywa znacznik meta viewport w kodzie strony. Bez niego przeglądarki telefonów zakładają szeroki ekran wirtualny i pomniejszają całą stronę, zmuszając użytkownika do przybliżania i przewijania w bok. Ustawienie meta viewportu tak, aby szerokość odpowiadała szerokości urządzenia, sprawia, że strona renderuje się w rzeczywistej skali, a układ może poprawnie reagować na dostępną przestrzeń.

Viewport a responsywność i UX

Viewport jest fundamentem responsive web design: reguły CSS, w tym media queries oraz jednostki zależne od viewportu, pozwalają dopasowywać rozmiary, kolumny i odstępy do dostępnej przestrzeni. Poprawne zarządzanie viewportem wprost przekłada się na UX — czytelność treści, wygodę dotykowych obszarów i brak konieczności ręcznego przybliżania. Ma też związek z Core Web Vitals: źle zdefiniowany viewport lub elementy wykraczające poza jego szerokość powodują przesunięcia układu i pogarszają wrażenia. Projektując stronę, warto testować ją na różnych rozmiarach viewportu, aby mieć pewność, że treść pozostaje czytelna i użyteczna niezależnie od urządzenia.