Il viewport meta tag: perché è obbligatorio e cosa fa

Perché il meta viewport è necessario per far funzionare correttamente il responsive design sui dispositivi mobili.

Immagina di aver scritto un sito web che sul computer si vede correttamente. Aprendolo dallo smartphone, però, il layout appare minuscolo e difficile da leggere.

Invece di mostrare la tua versione impilata e leggibile, il telefono mostra il sito Desktop, ma rimpicciolito talmente tanto che per leggere il testo devi fare “Pinch to Zoom” (avvicinare due dita allo schermo e allargarle).

Perché succede questo?

Il comportamento storico dei browser mobile

Agli albori degli smartphone (come il primo iPhone del 2007), i siti “Responsive” non esistevano. Tutti i siti web del mondo erano larghi circa 980px, progettati per i monitor dei PC. Se uno smartphone (con uno schermo largo fisicamente 320px) avesse provato a renderizzare un sito largo 980px, avrebbe mostrato solo l’angolo in alto a sinistra della pagina.

Per risolvere questo problema, i browser mobile iniziarono a usare una viewport virtuale larga circa 980px: renderizzavano il sito come se fosse desktop e poi lo riducevano visivamente per farlo stare nello schermo.

Questo comportamento di compatibilità può ancora attivarsi se non dichiari esplicitamente il viewport.

Il meta tag viewport

Per dire al browser di usare la larghezza reale del dispositivo, devi inserire un meta tag specifico nella sezione <head> del tuo HTML.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <!-- Configurazione del viewport mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il mio sito Responsive</title>
</head>

Cosa significa esattamente?

name="viewport": Stiamo configurando l’area visibile (viewport) del browser.
width=device-width: “Caro browser, non fingere di essere largo 980px. Imposta la tua larghezza virtuale esattamente uguale alla larghezza fisica del dispositivo (device-width)”.
initial-scale=1.0: “Non fare nessuno zoom in avanti o all’indietro quando carichi la pagina. Mostrala al 100% della dimensione reale”.

Senza questa riga, le media query e le misure responsive possono comportarsi in modo diverso da quello che ti aspetti sui dispositivi mobili. Inseriscila sempre nel <head> dei tuoi documenti HTML.

Esercizi

Base · facile

Scrivi il meta tag viewport completo da inserire nell’<head>.

Soluzione

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width usa la larghezza reale del dispositivo; initial-scale=1.0 evita lo zoom iniziale.

Intermedio · medio

Apri una pagina responsive sul DevTools in modalità mobile, rimuovi il meta viewport e ricarica. Descrivi cosa cambia (sito rimpicciolito, media query che non scattano come previsto) e spiega il comportamento storico della viewport virtuale a 980px.

Sfida · difficile

Spiega perché il meta viewport è un prerequisito perché le media query basate su width funzionino davvero sui dispositivi mobili, e cosa significano nel dettaglio width=device-width e initial-scale=1.0. Indica i rischi di forzare maximum-scale=1 o user-scalable=no per l’accessibilità.