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:
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.