Bez metatagu widocznego obszaru urządzenia mobilne renderują strony przy typowej szerokości ekranu komputera, a następnie pomniejszają je, co utrudnia ich czytanie.
Dzięki metatagowi widocznego obszaru możesz kontrolować szerokość i skalowanie widocznego obszaru, by dopasować go do właściwego rozmiaru na wszystkich urządzeniach.
Niepowodzenie kontroli metatagów widocznego obszaru w Lighthouse
Lighthouse oznacza strony bez metatagu widocznego obszaru:
![Kontrola Lighthouse pokazuje, że na stronie brakuje widocznego obszaru](https://developer.chrome.google.cn/static/docs/lighthouse/best-practices/viewport/image/lighthouse-audit-shows-pa-6f514cc3b4e29.png?authuser=6&hl=pl)
Strona nie przejdzie kontroli, chyba że zostaną spełnione wszystkie z tych warunków:
– Pole <head>
dokumentu zawiera tag <meta name="viewport">
.
– Metatag widocznego obszaru zawiera atrybut content
.
– wartość atrybutu content
zawiera tekst width=
.
Jak dodać metatag widocznego obszaru
Dodaj tag <meta>
widocznego obszaru z odpowiednimi parami klucz-wartość do elementu <head>
strony:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Działanie każdej pary klucz-wartość:
– width=device-width
ustawia szerokość widocznego obszaru na szerokość urządzenia.
– initial-scale=1
ustawia początkowy poziom powiększenia, gdy użytkownik odwiedza stronę.
Skala początkowa mniejsza niż 1
Gdy initial-scale
ma wartość mniejszą niż 1, może to spowodować, że w przeglądarkach będzie można włączyć funkcję powiększania za pomocą dwukrotnego kliknięcia. Jest to zwykle używane w przypadku stron na komputery, które nie są zoptymalizowane pod kątem urządzeń mobilnych. Powoduje to 300-milisekundowe opóźnienie interakcji z dotknięciem w czasie, gdy przeglądarka czeka na sprawdzenie, czy nastąpi drugie „podwójne” kliknięcie. Dlatego też kontrola nie powiedzie się, gdy skala początkowa jest ustawiona na mniej niż 1.