Imposta il tag meta viewport - Docs di MetricSpot

Q: Qual è la differenza tra `initial-scale=1` e `width=device-width`?

width=device-width imposta la larghezza del viewport per matchare la larghezza in pixel CSS del dispositivo (375 su iPhone, 360 sulla maggior parte degli Android). initial-scale=1 imposta il livello di zoom iniziale a 1.0. Entrambi sono necessari — impostali insieme.

Q: Devo includere `viewport-fit=cover` per i notch dell'iPhone?

Solo se stai usando env(safe-area-inset-*) nel CSS per spingere il contenuto fuori dal notch / dynamic island. Altrimenti il valore di default va bene.

Cosa controlla questo check

Cerca un tag <meta name="viewport"> nel <head> della pagina e verifica che imposti almeno width=device-width e un initial-scale. Il check fallisce quando il tag è del tutto assente o quando blocca lo zoom (user-scalable=no, maximum-scale=1.0 — entrambe violazioni di accessibilità).

Perché è importante

Senza un tag viewport, i browser mobile assumono che la pagina sia desktop e la renderizzano a 980px di larghezza, poi zoomano via per farla stare nello schermo. Il risultato è illeggibile: testo da 4 pixel, immagini sovradimensionate, nessun breakpoint responsive che scatta perché la matematica del viewport è sbagliata.

Mobile-first indexing di Google. Dal 2021, Google usa principalmente il rendering mobile della pagina per il ranking. Un sito che fallisce il check viewport è trattato come non mobile-friendly — una penalità di posizionamento nella ricerca mobile.
Core Web Vitals. LCP, CLS e INP sono tutti misurati su mobile per default. Una pagina senza tag viewport innesca un rendering a larghezza desktop su un canvas grande come uno smartphone, che gonfia CLS e LCP.
Esperienza utente. Il traffico mobile è oltre il 60% per la maggior parte dei siti. Il tag viewport è ciò che fa funzionare il responsive design.

Come risolvere

Metti questo nel <head>, prima di qualsiasi CSS che dipenda dalla larghezza del viewport:

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

Questa è la ricetta canonica — ogni framework, CMS e starter template moderno la include. Se il tuo sito non ce l’ha, il template <head> è sbagliato.

Default comuni per framework.

Astro — <ViewTransitions /> non porta nulla di implicito. Aggiungi il meta tag al <head> del layout di base.
Next.js — App Router esporta una costante viewport da app/layout.tsx:

import type { Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

WordPress — ogni tema moderno emette il tag in header.php. Se il tuo no, il tema è precedente al 2014.
Vue / Nuxt / Svelte — incluso nello index.html dello starter.

Non rompere l’accessibilità. Due anti-pattern bloccano il pinch-to-zoom e violano WCAG 1.4.4:

<!-- Male — violazione di accessibilità -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Entrambi impediscono agli utenti ipovedenti di zoomare il testo. iOS 13+ ignora comunque user-scalable=no. Non aggiungere nessuno dei due.

Webview di app native. Se stai incorporando la pagina in una iOS WKWebView o Android WebView con i propri controlli di zoom, puoi limitare il viewport all’HTML specifico della webview — ma la versione pubblica sul web ha comunque bisogno del tag standard.

Verifica tu stesso:

curl -s https://yourdomain.com/ | grep -o '<meta name="viewport"[^>]*>'

Aspettati width=device-width, initial-scale=1. Se grep non restituisce nulla, il tag è mancante.

Domande frequenti

Qual è la differenza tra `initial-scale=1` e `width=device-width`?

width=device-width imposta la larghezza del viewport per matchare la larghezza in pixel CSS del dispositivo (375 su iPhone, 360 sulla maggior parte degli Android). initial-scale=1 imposta il livello di zoom iniziale a 1.0. Entrambi sono necessari — impostali insieme.

Devo includere `viewport-fit=cover` per i notch dell’iPhone?

Solo se stai usando env(safe-area-inset-*) nel CSS per spingere il contenuto fuori dal notch / dynamic island. Altrimenti il valore di default va bene.

Il tag influisce sui browser desktop?

I browser desktop ignorano completamente il tag meta viewport — renderizzano sempre alla larghezza effettiva della finestra. Il tag è solo per mobile.