Senza un meta tag viewport, i dispositivi mobili visualizzano le pagine con le larghezze dello schermo di un computer e poi le riducono, rendendole difficili da leggere.
L'impostazione del meta tag viewport ti consente di controllare la larghezza e il ridimensionamento dell'area visibile in modo che le dimensioni siano corrette su tutti i dispositivi.
Come viene eseguito 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 le seguenti condizioni:
- Il <head> del documento contiene un tag <meta name="viewport">.
- Il meta tag viewport contiene un attributo content.
- Il valore dell'attributo content include il testo width=.
Come aggiungere un meta tag dell'area visibile
Aggiungi un tag <meta> del viewport con le coppie chiave-valore appropriate al <head>
della tua 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 della visualizzazione in base alla 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 potrebbero attivare una funzionalità di zoom con doppio tocco, 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". Di conseguenza, l'audit non va a buon fine anche quando la scala iniziale è impostata su un valore inferiore a 1.