Guida HTML interattiva: Meta viewport

Q: Qual è il meta tag viewport standard?

, messo in . È la scelta giusta per quasi tutte le pagine responsive.

Q: Perché il mio meta viewport non funziona?

Controlla che il tag sia in , che name sia viewport e che i valori siano separati da virgole. Se la pagina scorre ancora di lato, qualche elemento è più largo dello schermo, come una larghezza fissa, un'immagine grande o una parola lunga; il tag non può correggere un CSS più largo del dispositivo.

Il tag da usare

Metti questa riga nell'<head> di ogni pagina:

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

width=device-width rende il layout largo quanto lo schermo, e initial-scale=1 apre la pagina con lo zoom al 100%. È tutto ciò che serve alla maggior parte dei siti. Una pagina completa con il tag al suo posto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Lo script legge il tag e la larghezza del layout. I browser desktop ignorano il tag viewport, quindi in questa anteprima la larghezza è semplicemente quella del riquadro dell'anteprima. Su un telefono, lo stesso file riporta la larghezza del telefono (di solito da 360 a 430 pixel CSS) grazie al tag.

Cosa fanno i telefoni senza il tag

Un browser mobile che non trova un tag viewport presume che la pagina sia stata fatta per il desktop. La impagina larga circa 980 pixel, poi rimpicciolisce tutto per farlo stare nello schermo. I due telefoni simulati qui sotto caricano la stessa pagina, uno impaginato a 980px e l'altro alla larghezza di un telefono, entrambi ridimensionati alla stessa grandezza:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

Sul primo telefono il testo a 16px diventa minuscolo e il lettore deve allargare con le dita. Sul secondo resta leggibile, e le colonne si impilano perché la regola @media (max-width: 600px) è soddisfatta. Ecco il secondo compito del tag: le media query vedono la larghezza del layout, quindi senza il tag un telefono dichiara 980px e i tuoi stili per mobile non si applicano mai. Cambia 375 in 980 in show('with', 375) e i due telefoni diventano uguali.

Il tag è solo metà del lavoro

Il tag viewport ti dà un layout stretto; il tuo CSS ci deve stare dentro. Un solo elemento con una larghezza fissa più grande dello schermo fa scorrere di lato l'intera pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Il primo riquadro scorre di lato; il secondo si restringe per starci. Dai alle immagini e agli altri elementi larghi max-width: 100%, e preferisci larghezze flessibili (percentuali, fr, flexbox) alle larghezze fisse in pixel.

Valori del viewport

Valore	Esempio	Cosa fa
`width`	`width=device-width`	Larghezza del layout. `device-width` è la larghezza dello schermo in pixel CSS; è ammesso anche un numero, ma raramente è una buona idea.
`initial-scale`	`initial-scale=1`	Livello di zoom all'apertura della pagina.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Limiti allo zoom. Un massimo basso blocca lo zoom, quindi lascia fuori `maximum-scale`.
`user-scalable`	`user-scalable=yes`	Se lo zoom con le dita è permesso. Lascialo fuori.
`viewport-fit`	`viewport-fit=cover`	Permette alla pagina di estendersi sotto un notch o gli angoli arrotondati, insieme a un padding con `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Come la tastiera sullo schermo influisce sul layout. Supportato da Chrome su Android.

I valori sono separati da virgole. Una pagina che riempie tutto lo schermo sui telefoni con il notch si presenta così:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Non bloccare lo zoom

Nei template più vecchi troverai questo tag:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Impedisce lo zoom con le dita, su cui contano le persone ipovedenti, e i controlli di accessibilità come Lighthouse lo segnalano. Safari su iOS ignora user-scalable=no, quindi il tag non funziona nemmeno in modo coerente. Se un campo di un modulo fa zoom quando lo tocchi su iPhone, la causa è una dimensione del font sotto i 16px nell'input; imposta il font-size dell'input ad almeno 16px invece di disattivare lo zoom.

Errori comuni

Dimenticare il tag. Senza, un foglio di stile responsive non fa niente sui telefoni, perché le media query vedono un layout di 980px. Mettilo accanto al tag title nel template della pagina.
Punti e virgola tra i valori. Usa le virgole: width=device-width, initial-scale=1.
Fissare una larghezza come width=375. Gli schermi variano; usa device-width.
Disattivare lo zoom con user-scalable=no o maximum-scale=1.
Dare la colpa al tag per lo scorrimento laterale. Trova l'elemento più largo dello schermo e dagli una larghezza flessibile.

Domande frequenti

Cosa fa il meta tag viewport?

Dice ai browser mobili quanto deve essere largo il layout. Senza, la maggior parte dei telefoni impagina la pagina a circa 980 pixel CSS e la rimpicciolisce per farla stare nello schermo. Con width=device-width il layout corrisponde alla larghezza dello schermo, quindi il testo è leggibile e le media query funzionano.

Qual è il meta tag viewport standard?

<meta name="viewport" content="width=device-width, initial-scale=1">, messo in <head>. È la scelta giusta per quasi tutte le pagine responsive.

Perché il mio meta viewport non funziona?

Controlla che il tag sia in <head>, che name sia viewport e che i valori siano separati da virgole. Se la pagina scorre ancora di lato, qualche elemento è più largo dello schermo, come una larghezza fissa, un'immagine grande o una parola lunga; il tag non può correggere un CSS più largo del dispositivo.

Devo usare user-scalable=no o maximum-scale=1?

No. Entrambi impediscono lo zoom, su cui contano molti utenti ipovedenti, e non passano i controlli di accessibilità. Safari su iOS ignora comunque user-scalable=no.

Il meta tag viewport ha effetto sui browser desktop?

No. I browser desktop lo ignorano; lì la larghezza del layout è semplicemente quella della finestra. Il tag conta su telefoni e tablet.

Concetti correlati