Bez metatagu viewport urządzenia mobilne renderują strony w typowych szerokościach ekranu komputera, a następnie je zmniejszają, co utrudnia czytanie.
Ustawienie metatagu widocznego obszaru pozwala kontrolować szerokość i skalowanie widocznego obszaru, aby był on prawidłowo dopasowany do wszystkich urządzeń.
Jak przebiega audyt metatagu viewport w Lighthouse
Lighthouse oznacza strony bez metatagu viewport:
Strona nie przejdzie audytu, jeśli nie zostaną spełnione wszystkie te warunki:
- Dokument zawiera tag <meta name="viewport"> w sekcji <head>.
– Metatag viewport zawiera atrybut content.
– Wartość atrybutu content zawiera tekst width=.
Jak dodać metatag viewport
Dodaj do sekcji <head> na stronie tag widoku <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ść obszaru widocznego 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 po dwukrotnym kliknięciu, która jest zwykle używana w przypadku witryn na komputery, które nie są zoptymalizowane pod kątem urządzeń mobilnych. Dodaje to 300-milisekundowe opóźnienie do wszystkich interakcji z użyciem dotyku, podczas gdy przeglądarka czeka, aby sprawdzić, czy nastąpi drugie „podwójne” dotknięcie. Audyt zakończy się więc niepowodzeniem również wtedy, gdy wartość initial-scale jest mniejsza niż 1.