Informazioni sul tag meta viewport
Che cos'è il tag meta viewport?
Il tag meta viewport indica al browser mobile come dimensionare la pagina. Senza di esso, i telefoni presumono che la pagina sia stata creata per un desktop, la visualizzano a una larghezza di circa 980 pixel e poi ne riducono le dimensioni per adattarla allo schermo, producendo una pagina leggibile solo in miniatura che nessuno può usare senza dover effettuare lo zoom.
È una singola riga nell’head ed è l’interruttore che consente al CSS responsive di entrare effettivamente in azione. Le media query misurano il viewport, quindi se il viewport è una finzione, ogni breakpoint che hai scritto misura la cosa sbagliata.
Vale la pena eseguire un controllo del tag meta viewport su qualsiasi pagina realizzata al di fuori del template principale, perché è quasi sempre lì che si scopre che ne manca uno.
Il tag viewport è ancora importante nel 2026?
Assolutamente sì, perché senza di esso tutto il resto del lavoro sull’ottimizzazione per dispositivi mobili è inutile. Puoi scrivere un foglio di stile perfettamente fluido e pubblicare una pagina che si comporta come se fosse stata realizzata nel 2009.
I temi moderni lo includono di serie, ed è proprio per questo che la sua assenza è così facile da non notare. Quando manca, di solito si tratta di un template personalizzato, di una landing page per una campagna o di una pagina assemblata da uno strumento che ha generato autonomamente il proprio head.
Le impostazioni sono importanti tanto quanto la presenza. È presente un tag che disabilita lo zoom, è corretto secondo questo test e costituisce una violazione dell’accessibilità.
Come il tag viewport si rapporta alla ricerca tramite IA
Influisce sul rendering mobile, che è ciò che viene indicizzato. Una pagina che non riesce a disporsi correttamente su un telefono viene valutata nella sua forma peggiore anziché in quella prevista.
Il tag non ha di per sé alcun significato che un crawler possa leggere, ma la sua assenza compromette tutto ciò che ne consegue, compresa la quantità di contenuti visibile nella visualizzazione renderizzata.
È una delle correzioni più economiche di questo elenco e una delle poche con un effetto tutto o niente.
Best practice per il viewport
- Includilo in ogni pagina, nell’elemento head.
- Imposta la larghezza sulla larghezza del dispositivo e la scala iniziale su 1.
- Non disabilitare lo zoom né limitare la scala massima. Impedire lo zoom è una carenza di accessibilità.
- Controlla separatamente le pagine personalizzate e quelle delle campagne rispetto al modello principale.
- Verifica su un telefono reale anziché affidarti esclusivamente a un emulatore desktop.
Cosa controlla questo strumento
Lo strumento legge il codice HTML della pagina e segnala se è presente un tag meta viewport.
Verifica la presenza anziché le impostazioni, quindi anche un tag che disabilita lo zoom supera il controllo. Se il tag è presente e la pagina continua a funzionare male su un telefono, le impostazioni sono la cosa successiva da esaminare.
Cosa fare dopo
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
reattività sui dispositivi mobili test.