Frontend Academy · Lezione

Il meta tag viewport

Aggiunga il meta tag viewport e comprenda perché sia necessario per il corretto funzionamento dei layout responsive sui dispositivi mobili.

Il meta tag viewport è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché utilizzare il meta tag viewport?

Senza il meta tag viewport, i browser mobili visualizzano la pagina con una larghezza da desktop (spesso 980px) e la rimpiccioliscono per adattarla. Il testo diventa minuscolo e i layout risultano compromessi. Il meta tag indica al browser di usare la larghezza effettiva del dispositivo.

Il tag

Aggiunga questo elemento all'interno di <head> in ogni pagina. È necessario affinché qualsiasi design responsive funzioni correttamente.

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

width=device-width

width=device-width imposta la larghezza del viewport sulla larghezza dello schermo del dispositivo in pixel CSS. Su un iPhone 14 (largo 390px), il viewport sarà di 390px, non di 980px.

initial-scale=1.0

initial-scale=1.0 imposta il livello di zoom su 1 al primo caricamento della pagina. Senza questo valore, alcuni browser potrebbero comunque applicare un fattore di zoom. Insieme a device-width, permette di ottenere un rapporto reale di 1:1 tra pixel CSS e pixel del dispositivo.

Pixel CSS e pixel fisici

Gli schermi ad alta densità (Retina) hanno un device pixel ratio (DPR) maggiore di 1. Un iPhone 14 largo 390px ha 1170 pixel fisici (DPR = 3). I pixel CSS astraggono dai pixel fisici: il CSS continua a funzionare in pixel CSS indipendentemente dal DPR.

Non utilizzi user-scalable=no

Alcuni sviluppatori aggiungono user-scalable=no per disabilitare lo zoom con il gesto pinch. Non lo faccia. Impedisce agli utenti con disabilità visive di ingrandire il contenuto per leggerlo e viola il criterio di successo 1.4.4 delle WCAG.

Unità del viewport: vw e vh

1vw = 1% della larghezza del viewport. 1vh = 1% dell'altezza del viewport. 100vw e 100vh riempiono l'intero viewport. Le utilizzi per le sezioni hero e i layout a schermo intero.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — altezza dinamica del viewport

Sui dispositivi mobili, 100vh include l'interfaccia del browser (la barra degli indirizzi), causando talvolta il taglio del contenuto. Il nuovo 100dvh (dynamic viewport height) si adatta all'interfaccia visibile del browser. Lo utilizzi con un fallback.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

viewport negli Strumenti per sviluppatori

In Chrome DevTools, faccia clic sull'icona del dispositivo per accedere alla Modalità dispositivo e vedere esattamente l'aspetto della pagina con viewport di dimensioni diverse. Il righello mostra i pixel CSS.

Varianti dell'attributo content

Può anche impostare initial-scale, minimum-scale e maximum-scale. Li mantenga su valori ragionevoli. Impostare minimum-scale=1 senza user-scalable=no consente comunque lo zoom, che è l'approccio accessibile.

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

Viewport e media query

Le media query utilizzano la larghezza del viewport (il valore in pixel CSS, non i pixel fisici). Se il viewport è di 390px, @media (max-width: 768px) sarà applicata. Il meta tag viewport fa funzionare correttamente questi breakpoint sui dispositivi mobili.

Verifica rapida

Qual è lo scopo di width=device-width nel meta tag viewport?

Riepilogo: il meta tag viewport

Includa sempre in . Non disabiliti mai lo zoom dell'utente. Utilizzi vw/vh per dimensioni relative al viewport. dvh risolve i problemi causati dall'interfaccia del browser mobile. Questo singolo tag consente a tutto il CSS responsive di funzionare sui dispositivi mobili.

Domande Frequenti

La lezione «Il meta tag viewport» è gratuita?

Sì — il testo completo di «Il meta tag viewport» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Il meta tag viewport»?

Aggiunga il meta tag viewport e comprenda perché sia necessario per il corretto funzionamento dei layout responsive sui dispositivi mobili. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Il meta tag viewport»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy