Bez tagu meta viewport urządzenia mobilne renderują strony w typowej szerokości ekranu komputera, a następnie je skalują, przez co będą mało czytelne.
Ustawienie metatagu viewport pozwala kontrolować szerokość i skalowanie widocznego obszaru, aby był on prawidłowo dostosowany do wszystkich urządzeń.
Dlaczego audyt metatagu viewport w Lighthouse się nie powiedzie
Lighthouse oznacza strony bez metatagu viewport:
Strona nie przejdzie audytu, jeśli nie zostaną spełnione wszystkie te warunki:
- dokument <head> zawiera tag <meta name="viewport">.
– Metatag widocznego obszaru zawiera atrybut content.
– Wartość atrybutu content zawiera tekst width=.
Jak dodać metatag widocznego obszaru
Dodaj do <head> strony tag <meta> z odpowiednimi parami klucz-wartość:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Oto, co robi każda para klucz-wartość:width=device-width ustawia szerokość widoku na szerokość urządzenia.
– initial-scale=1 ustawia początkowy poziom powiększenia, gdy użytkownik odwiedza stronę.
początkowa skala mniejsza niż 1,
Jeśli wartość initial-scale jest mniejsza niż 1, przeglądarki mogą włączyć funkcję powiększania przez dwukrotne dotknięcie, która jest zwykle używana w przypadku witryn na komputery, które nie są zoptymalizowane pod kątem urządzeń mobilnych. Powoduje to 300-milisekundowe opóźnienie we wszystkich interakcjach polegających na dotknięciu, gdy przeglądarka czeka na sprawdzenie, czy druga czynność jest „podwójna”. kliknij. Dlatego audyt nie powiedzie się, jeśli początkowa skala ma wartość mniejszą niż 1.