Znacznik meta viewport
Znacznik meta viewport to element nagłówkowy umieszczany w sekcji head dokumentu HTML, który instruuje przeglądarkę internetową, w jaki sposób ma dostosować wymiary i skalę prezentowanej podstrony do fizycznego ekranu urządzenia mobilnego. Bez jego zastosowania mobilne przeglądarki domyślnie renderują stronę na wirtualnym pulpicie o szerokości zazwyczaj 980 pikseli, a następnie sztucznie ją pomniejszają, co skutkuje nieczytelnym tekstem i koniecznością ręcznego powiększania ekranu przez użytkownika.
Optymalna składnia i kluczowe parametry
Standardowa, rekomendowana przez Google i konsorcjum W3C deklaracja wygląda następująco:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Każdy z użytych w niej parametrów odpowiada za inny element kontroli widoku:
-
width=device-width: Nakazuje przeglądarce dopasowanie szerokości obszaru roboczego (viewportu) do fizycznej szerokości ekranu danego urządzenia w pikselach CSS.
-
initial-scale=1.0: Ustala początkowy poziom przybliżenia strony po jej załadowaniu na skali 1:1, zapobiegając automatycznemu skalowaniu.
-
user-scalable=yes / no: Określa, czy użytkownik ma możliwość ręcznego powiększania strony gestem ściągania palców (ze względów dostępności i UX nie zaleca się blokowania tej opcji wartością no).
-
maximum-scale / minimum-scale: Wyznacza dopuszczalne granice, do jakich użytkownik może przybliżać lub oddalać zawartość ekranu.
Rola w Mobile-First Indexing oraz Core Web Vitals
Obecność poprawnie skonfigurowanego znacznika meta viewport jest podstawowym wymogiem technologicznym, aby strona została uznana za dostosowaną do urządzeń mobilnych (Responsive Web Design). Google stosuje podejście Mobile-First Indexing, co oznacza, że wersja mobilna serwisu stanowi podstawę do oceny i indeksowania całej domeny.
Z punktu widzenia wskaźników wydajnościowych Core Web Vitals, brak tego znacznika lub jego błędne wdrożenie powoduje drastyczne pogorszenie wskaźnika CLS (Cumulative Layout Shift). Przeglądarka próbuje dynamicznie przeskalowywać elementy w trakcie ładowania, powodując niepożądane skoki układu strony, co uderza zarówno w ocenę algorytmiczną, jak i w komfort użytkownika.
