Tag meta viewport to element HTML <meta> umieszczony w <head> strony internetowej, który mówi przeglądarkom mobilnym, jak ustawić szerokość strony i początkowy poziom zoomu. Bez niego przeglądarki mobilne renderują domyślnie tak, jakby ekran miał 980 pikseli szerokości, a następnie kurczą całość, aby się zmieściła. W rezultacie: tekst o wysokości ledwie 4 pikseli, użytkownicy używający pinch do powiększania, oraz oznaczenie "Strona nie wygląda na przyjazną dla urządzeń mobilnych" w każdym audycie SEO i dostępności. Rozwiązaniem jest jedna linia HTML. Prawie każdy nowoczesny motyw WordPress ją zawiera, ale wiele starszych lub niestandardowych motywów nadal ją pomija.
Jak wygląda tag meta viewport i jaka jest poprawna wartość?
Standardowy, zalecany tag meta viewport w 2026 roku to:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />To mówi przeglądarce dwie rzeczy. Po pierwsze, ustaw szerokość layoutu viewport równą szerokości ekranu urządzenia (zamiast starszej wartości domyślnej 980px). Po drugie, renderuj stronę z zoomem 1:1 przy pierwszym załadowaniu (zamiast pomniejszonego podglądu). Te dwa ustawienia razem sprawiają, że responsywny układ CSS rzeczywiście zachowuje się responsywnie na telefonach.
Tag powinien znajdować się jak najwyżej w <head>, najlepiej bezpośrednio po deklaracji <meta charset>. Przeglądarki parsują go wcześnie i używają przed rozłożeniem czegokolwiek innego.
Dlaczego tag meta viewport jest konieczny?
Powód jego istnienia jest historyczny. Gdy iPhone został wprowadzony w 2007 roku, mobilny internet praktycznie nie istniał. Większość stron była projektowana dla monitorów stacjonarnych 1024 pikseli. Decyzja inżynierska Apple: renderuj każdą stronę tak, jakby urządzenie miało 980 pikseli szerokości, a następnie zmniejsz ją, aby zmieściła się na ekranie 320 pikseli. Użytkownicy mogli używać pinch i zoomu. Był to najgorszy możliwy domyślny mechanizm dla witryn naprawdę przystosowanych do mobile, więc Apple wprowadziło tag meta, do którego strony przyjazne dla mobile mogły się zgłosić: width=device-width. Konwencja rozprzestrzeniła się na każdą inną przeglądarkę mobilną, i 17 lat później to nadal jest mechanizm.
Praktyczna implikacja dla witryny WordPress: jeśli twój motyw jest responsywny (czyli zasadniczo każdy motyw od 2014 roku), ale brakuje tagu meta viewport, przeglądarki nie wiedzą, że twój CSS jest responsywny. Stosują starszy fallback 980 pikseli, twoje media queries nigdy się nie wyzwalają, a witryna wygląda na zepsutą na mobile, mimo że CSS by zadziałał.
Jakie są parametry tagu meta viewport?
Atrybut content to lista parametrów oddzielonych przecinkami. Dwa niezbędne pokrywają 99% przypadków; pozostałe są sytuacyjne.
width=device-width. Ustawia viewport layoutu, aby odpowiadał szerokości ekranu urządzenia. Zawsze dołączaj. Alternatywą jest stała wartość pikselowa (width=1024), która zasadniczo nigdy nie jest właściwym wyborem dla nowoczesnej witryny.initial-scale=1.0. Ustawia poziom zoomu przy pierwszym załadowaniu strony.1.0oznacza brak zoomu (1 piksel CSS = 1 piksel layoutu). Zawsze dołączaj. Bez tego niektóre przeglądarki Android historycznie stosowały nieoczekiwane poziomy zoomu.minimum-scaleimaximum-scale. Ustawiają granice dla pinch-to-zoom użytkownika. Lepiej pominąć. Ograniczanie zoomu użytkownika to naruszenie dostępności zgodnie z WCAG 2.1 (kryterium sukcesu 1.4.4 "Zmiana rozmiaru tekstu") i Google uważa to za problem użyteczności mobilnej. Użytkownicy z niedowidzeniem polegają na zoomie, aby czytać tekst.user-scalable=no. Wyłącza pinch-to-zoom całkowicie. Ten sam problem dostępności co powyżej. Niektóre aplikacje single-page i witryny gier go używają, ale dla każdej witryny napędzanej treścią (blog, sklep, strona marketingowa), aktywnie szkodzi użytkownikom. Nowoczesne przeglądarki ignorująuser-scalable=now Safari i Firefox specyficznie, aby chronić dostępność.viewport-fit=cover. Mówi iOS, aby rozszerzył layout pod notch i wskaźnikiem home na iPhone X i nowszych. Konieczne, jeśli masz projekt full-bleed, który powinien sięgać krawędzi ekranu. Jeśli twoja witryna ma standardowy padding wokół treści, możesz to zignorować.interactive-widget. Nowsza właściwość (2023+), która kontroluje, jak wirtualna klawiatura wchodzi w interakcję z viewportem. Domyślne zachowanie jest dobre dla większości witryn.
Co idzie nie tak, gdy brakuje tagu meta viewport?
Cztery objawy, wszystkie widoczne natychmiast na telefonie:
- Tekst jest mikroskopijny. Cała strona jest ściśnięta w szerokość ekranu, więc tekst korpusu 16px renderuje przy może 4-5px rzeczywistych pikseli. Użytkownicy muszą używać pinch-zoom, aby czytać.
- Pojawia się przewijanie poziome. Strona jest ułożona na 980px szerokości na ekranie 390px, więc występuje znaczne poziome przepełnienie. Użytkownicy muszą przewijać w bok oprócz w dół.
- Przyciski i linki są za małe, aby je dotknąć. Apple zaleca minimalny cel dotyku 44x44 punkty. Pomniejszone o czynnik 2,5 stają się 17x17 rzeczywistych pikseli, znacznie poniżej tego, co palce mogą niezawodnie trafić.
- Google Search Console oznacza stronę. Raport Użyteczności Mobilnej pokazuje błędy "Viewport nie ustawiony" lub "Treść szersza niż ekran". Od czasu indeksacji mobile-first (pełne wdrożenie w 2021 roku) Google głównie indeksuje wersję mobilną twojej witryny, a strony z problemami użyteczności mobilnej mogą rangować niżej.
Jak sprawdzić, czy moja witryna WordPress ma tag meta viewport?
Cztery sposoby, najszybszy najpierw:
- Raport InspectWP. Sekcja HTML oznacza, czy tag meta viewport jest obecny, jaką ma wartość i czy ogranicza zoom użytkownika.
- Pokaż źródło strony. Kliknij prawym przyciskiem na stronie, "Pokaż źródło strony" (lub Cmd/Ctrl+U), wyszukaj "viewport". Powinieneś znaleźć jeden tag
<meta name="viewport">. Zero oznacza brak. Dwa lub więcej oznacza konflikt gdzieś w twoim motywie. - Emulacja mobilna Chrome DevTools. Otwórz DevTools (F12), kliknij ikonę paska narzędzi urządzenia. Jeśli strona renderuje się pomniejszona i maleńka w presecie iPhone 14, tag meta viewport jest brak lub zły.
- Google Search Console. Pod "Doświadczenie strony, Użyteczność mobilna" wszystkie strony bez tagu viewport są listowane wprost.
Jak dodać tag meta viewport w WordPressie?
Trzy scenariusze, w zależności od tego, jak twój motyw jest zbudowany:
Motyw już go zawiera (większość nowoczesnych motywów)
Każdy domyślny motyw WordPress od Twenty Fourteen (2013) zawiera poprawny tag meta viewport w swoim header.php. Motywy blokowe (Twenty Twenty-Two i nowsze) zawierają go automatycznie przez edytor. Prawie każdy komercyjny motyw od Astra, GeneratePress, Kadence, Avada, Divi, Elementor Hello itp. go zawiera. Sprawdź najpierw źródło: jeśli już tam jest, nic nie rób.
Motyw go nie zawiera (starsze lub niestandardowe motywy)
Dodaj go do header.php twojego motywu, zaraz po linii <meta charset>:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Jeśli nie chcesz edytować plików motywu (bo motyw nie jest twój, lub aby przetrwać aktualizacje motywu), użyj motywu podrzędnego lub dodaj go przez snippet w functions.php:
add_action('wp_head', function () {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' . "\n";
}, 1);Priorytet 1 zapewnia, że jest wyprowadzany bardzo wcześnie w <head>. Zachowanie przeglądarki jest bardziej przewidywalne, gdy viewport jest jednym z pierwszych tagów.
Widzisz dwa tagi viewport (konflikt)
Niektóre wtyczki (wtyczki PWA w stylu aplikacji mobilnej, wtyczki AMP, niektóre kreatory stron) wstrzykują własny tag viewport. Jeśli twój motyw również jeden wyprowadza, kończysz z dwoma, a przeglądarki używają pierwszego, który napotkają. Objawy: strona czasem renderuje się poprawnie, a czasem nie, w zależności od tego, który załadował się pierwszy. Rozwiązanie: zidentyfikuj duplikat (wyszukaj "viewport" w wyrenderowanym HTML), a następnie wyłącz nieprawidłowy output. Ustawienia wtyczki zwykle mają przełącznik do tłumienia jej injekcji viewport.
Czy powinienem ograniczać zoom użytkownika dla UI w stylu aplikacji?
Krótka odpowiedź: nie. Pokusa pochodzi od projektantów chcących, aby witryna czuła się jak natywna aplikacja, gdzie pinch-to-zoom nie działa. Rzeczywistość:
- Narusza WCAG 2.1. Kryterium Sukcesu 1.4.4 Web Content Accessibility Guidelines wymaga, aby użytkownicy mogli zmieniać rozmiar tekstu do 200% bez utraty funkcjonalności. Ograniczanie zoomu to łamie.
- Szkodzi użytkownikom z niedowidzeniem. Około 4% dorosłych ma jakąś formę upośledzenia wzroku wymagającą zoomu. Dla nich twoja strona "w stylu aplikacji" jest nieczytelna.
- Nowoczesne przeglądarki i tak ignorują ograniczenie. Safari na iOS 10+ i Firefox aktywnie ignorują
user-scalable=nood lat, specjalnie z powodu szkody dla dostępności. Ustawienie działa tylko na malejącej mniejszości przeglądarek. - Szkodzi SEO. Kryteria mobile-friendly Google'a wyraźnie zawierają "strona nie ogranicza pinch-to-zoom". Strony, które to robią, są oznaczane w Search Console.
Jeśli twoje UI psuje się, gdy użytkownicy powiększają, prawidłowym rozwiązaniem jest sprawienie, aby CSS gracefully obsługiwał większy tekst, a nie blokowanie zoomu.
Jak tag viewport współpracuje z responsywnym projektem?
Tag viewport i media queries CSS współpracują razem. Tag viewport ustawia viewport layoutu (szerokość, przy której odbywają się obliczenia CSS); media queries wyzwalają się na podstawie tej szerokości. Bez width=device-width twoje media queries są oceniane względem starszej assumpcji 980px, więc reguła @media (max-width: 768px) nigdy nie wyzwala się na 390px iPhone (ponieważ przeglądarka myśli, że viewport layoutu ma 980px szerokości).
To najczęstsza przyczyna "mój responsywny projekt nie działa" na witrynie WordPress: CSS jest w porządku, media queries są poprawne, ale tag viewport jest brakujący lub zły, więc przeglądarka nigdy nie wchodzi w tryb mobilny. Dodanie jednej linii HTML to naprawia.
Częste błędy
- Używanie stałej szerokości takiej jak
width=1024. Wymusza każde urządzenie do renderowania w 1024px, niwecząc cały sens. Prawie zawsze błąd kopiuj-wklej z nieaktualnego tutoriala. - Ustawianie
initial-scalena coś innego niż 1.0. Wartości jak0.5lub2.0oznaczają, że strona ładuje się wstępnie powiększona lub pomniejszona. Użytkownicy natychmiast próbują wrócić do normalnego zoomu. Zawsze 1.0. - Ograniczanie zoomu za pomocą
user-scalable=nolubmaximum-scale=1. Naruszenie dostępności, kara SEO, i tak ignorowane przez nowoczesne Safari i Firefox. Po prostu usuń. - Zapomnienie
viewport-fit=coverw projektach full-bleed dla iPhone X+. Treść nie sięga krawędzi ekranu; otrzymujesz białe pasy na górze i dole wokół notcha i wskaźnika home. Dodaj parametr, jeśli projekt zamierza edge-to-edge. - Dodawanie tagu przez PHP
echopoza<head>. Tag w<body>to nieprawidłowy HTML i przeglądarki go ignorują. Tag musi być wewnątrz<head>.
Co sprawdza InspectWP
Sekcja HTML każdego raportu InspectWP weryfikuje, że tag meta viewport jest obecny i raportuje jego wartość content. Jeśli tag brakuje, raport oznacza to jako ostrzeżenie, ponieważ jest to niemal uniwersalny wymóg użyteczności mobilnej. Jeśli user-scalable=no lub maximum-scale jest ustawione, aby ograniczyć zoom, jest to oznaczane jako problem dostępności. Sprawdzenie jest niezależne od tego, czy projektant motywu zamierzał responsywny layout; liczy się to, czy tag jest faktycznie obecny w HTML, który widzi przeglądarka. Witryna może mieć doskonałą responsywną strukturę CSS i nadal nie przejść tego sprawdzenia, jeśli tag viewport został utracony podczas migracji motywu lub konfliktu wtyczki.