UX / UI Krytyczny wpływ Łatwe 2 min

Viewport / widok mobilny

Meta viewport zapewnia prawidłowe wyświetlanie na telefonie.

Co to jest

Meta tag viewport mówi przeglądarce, jak skalować stronę do szerokości urządzenia. Bez niego telefon wyrenderuje szerokość desktopową i wszystko jest „małe i oddalone”.

Dlaczego warto to rozwiązać

Google indeksuje mobile-first, ocenia przede wszystkim wersję mobilną. Bez prawidłowego viewportu witryna wypada w teście użyteczności na telefonie, co wprost obniża pozycje, ponieważ większość wizyt pochodzi z urządzeń mobilnych.

Jak to zrobić

1Wstaw do <head> standardowy meta tag viewport.
2Nie blokuj powiększania (maximum-scale=1 / user-scalable=no), szkodzi to dostępności.
3Sprawdź, czy treść nie przelewa się poziomo, a przyciski są wystarczająco duże (zob. audyt UX).

Przykład

Dobrze

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

Podsumowanie

Jeden wiersz w nagłówku, ale kluczowy dla świata mobile-first. Bez niego witryna jest na telefonie praktycznie bezużyteczna, a Google twardo to penalizuje. Po wdrożeniu przetestuj na prawdziwym telefonie oraz w narzędziu do użyteczności mobilnej.

Powiązane tematy