Meta Viewport HTML

Manuale completo del meta tag viewport

Tutto ciò che devi sapere per controllare zoom e layout sui dispositivi mobili

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Il tag viewport dice al browser come scalare e dimensionare la pagina sui dispositivi mobili. Senza di esso, i browser mobile fingono di avere uno schermo largo circa 980px e rimpiccioliscono tutto, rendendo il sito illeggibile su smartphone.
Proprietà disponibili
width Consigliato

Imposta la larghezza del viewport logico. Quasi sempre si usa device-width.

width=device-widthUsa la larghezza reale del dispositivo — quasi sempre quello che vuoi
width=500Forza una larghezza fissa di 500px — sconsigliato per layout responsive
height Raramente usato

Imposta l'altezza del viewport. Il browser la gestisce automaticamente, quindi viene usato solo in casi molto specifici.

height=device-heightUsa l'altezza reale del dispositivo
height=800Forza un'altezza fissa di 800px
initial-scale Consigliato

Zoom iniziale quando la pagina si carica. Il valore 1.0 corrisponde a nessuno zoom: la pagina occupa il 100% del viewport.

initial-scale=1.0Nessuno zoom iniziale — standard per qualsiasi sito responsive
initial-scale=0.5La pagina appare rimpicciolita al 50% all'apertura
initial-scale=2.0La pagina appare ingrandita al 200% all'apertura
minimum-scale Opzionale

Quanto l'utente può rimpicciolire al massimo (zoom out). Il range accettato è da 0.1 a 10.

minimum-scale=0.5L'utente può ridurre la pagina fino al 50%
minimum-scale=1.0L'utente non può rimpicciolire oltre il 100%
maximum-scale Attenzione accessibilità

Quanto l'utente può ingrandire al massimo (zoom in). Il range accettato è da 0.1 a 10.

maximum-scale=1.0Blocca completamente lo zoom in — sconsigliato per siti pubblici
maximum-scale=3.0L'utente può ingrandire fino al 300%
maximum-scale=5.0Permette uno zoom generoso — buona scelta per l'accessibilità
⚠️
Impostare maximum-scale=1.0 blocca lo zoom per gli utenti ipovedenti. Le linee guida WCAG 1.4.4 lo considerano una violazione dell'accessibilità. Safari su iOS dal 2022 ignora questo parametro per ragioni di accessibilità.
user-scalable Attenzione accessibilità

Abilita o disabilita completamente il pinch-to-zoom dell'utente.

user-scalable=yesPermette il pinch-to-zoom — valore di default
user-scalable=noBlocca il pinch-to-zoom — sconsigliato per siti pubblici
user-scalable=1Equivalente a yes
user-scalable=0Equivalente a no
⚠️
Safari iOS e Chrome Android recenti ignorano questo parametro quando l'utente ha attivato le impostazioni di accessibilità del dispositivo.
viewport-fit iPhone con notch

Controlla come il contenuto si adatta ai display con notch (iPhone X e successivi) o bordi curvi.

viewport-fit=autoComportamento default — il contenuto rispetta le aree sicure attorno al notch
viewport-fit=containIl contenuto rimane dentro l'area sicura, non va sotto il notch
viewport-fit=coverIl contenuto si estende sotto il notch/bordi curvi — da usare con le variabili CSS safe-area-inset-*
Esempio CSS per viewport-fit=cover: 
body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
}
Riepilogo proprietà
Proprietà Valori comuni Default
width device-width, numero px 980px
height device-height, numero px automatico
initial-scale 0.1 – 10 1.0
minimum-scale 0.1 – 10 0.1
maximum-scale 0.1 – 10 10
user-scalable yes / no / 1 / 0 yes
viewport-fit auto / contain / cover auto
Esempi pratici
✅ Standard — responsive senza restrizioni (raccomandato)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
La scelta corretta per qualsiasi sito web pubblico. Permette lo zoom e si adatta a ogni schermo.
⚙️ App web gestionale con pinch-to-zoom bloccato
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Usato tipicamente in applicazioni touch (es. gestionali, magazzino, POS) dove lo zoom accidentale romperebbe il layout. Non adatto a siti pubblici.
📱 Con supporto notch iPhone (app full-screen)
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
Permette al contenuto di estendersi sotto il notch. Va abbinato alle variabili CSS safe-area-inset-* per evitare che elementi importanti vengano nascosti.
♿ Zoom limitato ma accessibile (compromesso)
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0" />
Permette all'utente di ingrandire fino al 300% (utile per ipovedenti) senza poter rimpicciolire oltre il 100%. Buon compromesso tra controllo del layout e accessibilità.