Non ha un tag con larghezza o scala iniziale

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:

Il controllo Lighthouse mostra che nella pagina manca un'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.

Risorse