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 kończy się niepowodzeniem
Lighthouse oznacza strony bez metatagu viewport:
Strona nie przejdzie audytu, jeśli nie zostaną spełnione wszystkie te warunki:
- <head> dokumentu zawiera tag <meta name="viewport">.
– metatag viewport zawiera atrybut content.
– wartość atrybutu content zawiera tekst width=.
Dodawanie metatagu viewport
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. W tym celu dodaje 300 milisekund opóźnienia do wszystkich interakcji dotyku, podczas gdy przeglądarka sprawdza, czy nastąpiło drugie „podwójne” dotknięcie. Dlatego audyt nie powiedzie się, jeśli wartość początkowej skali jest mniejsza niż 1.