In assenza di un meta tag dell'area visibile, i dispositivi mobili visualizzano le pagine con le normali larghezze degli schermi dei computer desktop e quindi ne ridimensionano le pagine, rendendole difficili da leggere.
L'impostazione del meta tag dell'area visibile ti consente di controllare la larghezza e il ridimensionamento dell'area visibile in modo che venga ridimensionato correttamente su tutti i dispositivi.
In che modo il controllo dei meta tag dell'area visibile Lighthouse non va a buon fine
Lighthouse segnala le pagine senza un meta tag area visibile:
Una pagina non supera il controllo, a meno che non vengano soddisfatte tutte le seguenti condizioni:
- L'elemento <head> del documento contiene un tag <meta name="viewport">.
- Il meta tag dell'area visibile 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> dell'area visibile con le coppie chiave-valore appropriate alla sezione <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 dell'area visibile 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 il valore di initial-scale è inferiore a 1, i browser potrebbero attivare la funzionalità di zoom doppio tocco, generalmente utilizzata per i siti desktop non ottimizzati per il mobile. In questo modo, viene aggiunto un ritardo di 300 millisecondi a qualsiasi interazione di tocco mentre il browser attende per verificare se avviene un secondo "doppio" tocco. Di conseguenza, il controllo non va a buon fine anche quando la scala iniziale è impostata su un valore inferiore a 1.