Senza un meta tag viewport, i dispositivi mobili eseguono il rendering delle pagine con le larghezze tipiche degli schermi desktop e poi le riducono di scala, rendendole difficili da leggere.
L'impostazione del meta tag viewport consente di controllare la larghezza e il ridimensionamento dell'area visibile in modo che le dimensioni siano corrette su tutti i dispositivi.
Come non supera il controllo del meta tag dell'area visibile di Lighthouse
Lighthouse segnala le pagine senza un meta tag viewport:
Una pagina non supera il controllo a meno che non siano soddisfatte tutte queste condizioni:
- Il <head> del documento contiene un tag <meta name="viewport">.
- Il tag meta viewport contiene un attributo content.
- Il valore dell'attributo content include il testo width=.
Come aggiungere un meta tag viewport
Aggiungi un tag viewport <meta> con le coppie chiave-valore appropriate al <head>
della pagina:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Ecco cosa fa ogni coppia chiave-valore:
- width=device-width imposta la larghezza del viewport sulla larghezza del dispositivo.
- initial-scale=1 imposta il livello di zoom iniziale quando l'utente visita la pagina.
Scala iniziale inferiore a 1
Se initial-scale è impostato su un valore inferiore a 1, i browser possono attivare una funzionalità di doppio tocco per lo zoom, in genere utilizzata per i siti desktop non ottimizzati per il mobile. In questo modo, viene aggiunto un ritardo di 300 millisecondi a qualsiasi interazione con tocco mentre il browser attende di verificare se si verifica un secondo tocco "doppio". Pertanto, l'audit non viene superato anche quando initial-scale è impostato su un valore inferiore a 1.