Zalecany znacznik
Dla strony responsywnej wystarczy jedna linia w <head>. MDN jako minimum podaje width=device-width. Dodanie initial-scale=1 nie szkodzi, a analiza Chrome „Optimize viewport for mobile” oczekuje ustawionej szerokości i initial-scale równego co najmniej 1.
<meta name="viewport" content="width=device-width, initial-scale=1">Dyrektywy meta viewport
W większości projektów nie potrzebujesz niczego poza width i initial-scale. Stała szerokość, np. width=320, może psuć układ na innych ekranach.
| Dyrektywa | Wartości | Do czego służy |
|---|---|---|
| width | device-width albo 1–10000 px | Szerokość obszaru układu; od niej zależy jednostka vw |
| height | device-height albo 1–10000 px | Wysokość obszaru układu; od niej zależy jednostka vh |
| initial-scale | 0.0–10.0 | Początkowe powiększenie przy wczytaniu strony |
| minimum-scale | 0.0–10.0 | Najmniejsze dozwolone powiększenie |
| maximum-scale | 0.0–10.0 | Największe dozwolone powiększenie; nie ustawiaj poniżej 2 |
| user-scalable | yes / no (domyślnie yes) | Czy użytkownik może powiększać; nie ustawiaj no |
| interactive-widget | resizes-visual (domyślnie), resizes-content, overlays-content | Jak elementy interfejsu, np. klawiatura ekranowa, zmieniają rozmiar obszaru widoku |
| viewport-fit | auto, contain, cover | Czy strona wypełnia cały ekran urządzenia; przy cover używaj zmiennych safe-area-inset |
Nie blokuj powiększania
user-scalable=no albo maximum-scale poniżej 2 uniemożliwia powiększenie strony. Osoby słabowidzące nie przeczytają wtedy drobnego tekstu. WCAG 2.1 w kryterium 1.4.4 (poziom AA) wymaga, żeby tekst dało się powiększyć do 200% bez utraty treści ani funkcji.
Reguła W3C ACT „Meta viewport allows for zoom” i reguła axe meta-viewport (poziom wpływu: krytyczny) zgłaszają błąd dokładnie w tych dwóch przypadkach. MDN podaje, że iOS od wersji 10 domyślnie ignoruje te ustawienia, ale to nie zwalnia strony z wymagania: inne przeglądarki i ustawienia mogą je respektować.
Z zoomem wiąże się też kryterium 1.4.10 Reflow: treść ma być czytelna bez przewijania w dwóch kierunkach przy szerokości 320 px CSS, co odpowiada oknu o szerokości 1280 px powiększonemu do 400%.
<!-- Błąd WCAG 1.4.4: użytkownik nie powiększy strony -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Meta viewport a mobile-first indexing
Google indeksuje i ocenia strony na podstawie ich wersji mobilnej, pobranej przez robota smartfonowego, i zaleca projekt responsywny. Google nie podaje jednak, że sam znacznik meta viewport jest czynnikiem rankingowym. Jego rola jest techniczna: bez niego strona responsywna nie wyświetli się poprawnie na telefonie.
Google wycofał narzędzie Mobile-Friendly Test, jego API i raport Mobile Usability w Search Console od 1 grudnia 2023 roku, wskazując Lighthouse jako jedno z narzędzi do oceny wersji mobilnej. Lighthouse 13 sprawdza viewport w ramach analizy „Optimize viewport for mobile”.
Viewport a szybkość reakcji
Chrome podaje, że bez zoptymalizowanego viewportu stuknięcia mogą być opóźnione nawet o 300 ms. Przeglądarka czeka wtedy, czy nie nastąpi drugie stuknięcie, które oznaczałoby powiększenie. Viewport z width=device-width i initial-scale=1 spełnia warunki tej analizy Chrome.
Meta viewport to znacznik <meta name="viewport"> w sekcji <head>, który ustala szerokość i skalę obszaru układu strony na urządzeniach mobilnych. Najczęściej ma wartość width=device-width, initial-scale=1.
Dla strony responsywnej: <meta name="viewport" content="width=device-width, initial-scale=1">. Nie dodawaj user-scalable=no ani maximum-scale poniżej 2, bo blokują powiększanie strony.
Przeglądarka mobilna może wyrenderować stronę w wirtualnym oknie o szerokości np. 980 px i pomniejszyć ją do ekranu. Tekst będzie drobny, a style media queries dla małych ekranów się nie uruchomią.
Tak, jeśli blokuje powiększanie tekstu. Kryterium WCAG 1.4.4 (AA) wymaga powiększenia tekstu do 200%. Reguła axe meta-viewport i reguła W3C ACT zgłaszają błąd przy user-scalable=no oraz przy maximum-scale mniejszym niż 2.
Pośrednio. Google indeksuje strony na podstawie wersji mobilnej i zaleca projekt responsywny, a bez meta viewport strona responsywna nie wyświetli się poprawnie na telefonie. Google nie opisuje jednak samego znacznika jako czynnika rankingowego.
MDN podaje, że nowoczesne przeglądarki nie wymagają już initial-scale, żeby uniknąć niechcianego powiększenia. Warto go jednak zostawić: analiza Chrome „Optimize viewport for mobile” oczekuje initial-scale równego co najmniej 1.
Źródła i dalsza lektura
- MDN: <meta name="viewport"> dokumentacja
- W3C: Understanding SC 1.4.4 Resize Text standard
- W3C: Understanding SC 1.4.10 Reflow standard
- W3C ACT Rules: Meta viewport allows for zoom standard
- Deque axe: meta-viewport: Zooming and scaling must not be disabled dokumentacja
- Chrome for Developers: Optimize viewport for mobile dokumentacja
- Google Search Central: Mobile-first indexing best practices dokumentacja
- Google Search Central Blog: More on page experience (April 2023) blog