Viewport / visualizzazione su mobile
Il meta viewport garantisce una corretta visualizzazione su mobile.
Cos'è
Il meta tag viewport indica al browser come scalare la pagina in base alla larghezza del dispositivo. Senza di esso il mobile renderizza la larghezza desktop e tutto risulta "piccolo e lontano".
Perché è importante
Google indicizza mobile-first, valuta principalmente la versione mobile. Senza un viewport corretto il sito fallisce il test di usabilità su mobile, il che abbassa direttamente le posizioni, dato che la maggior parte delle visite proviene da mobile.
Come fare
- 1Inserisci nell'<head> il meta tag viewport standard.
- 2Non disabilitare lo zoom (maximum-scale=1 / user-scalable=no), danneggia l'accessibilità.
- 3Verifica che il contenuto non trabocchi orizzontalmente e che i pulsanti siano sufficientemente grandi (vedi l'audit UX).
Esempio
<meta name="viewport" content="width=device-width, initial-scale=1">Conclusione
Una sola riga nell'header, ma fondamentale per un mondo mobile-first. Senza di essa il sito su mobile è praticamente inutilizzabile e Google lo penalizza duramente. Dopo l'implementazione, testa su un telefono reale e con lo strumento di usabilità mobile.
Argomenti correlati