Devo disabilitare user-scalable per evitare zoom "accidentali"?

In generale no — bloccare lo zoom con pizzico impedisce ai visitatori ipovedenti di ingrandire per leggere i tuoi contenuti, cosa segnalata dalle linee guida sull'accessibilità (WCAG 1.4.4). Correggi i problemi di layout invece di disabilitare lo zoom.

Cosa fa esattamente viewport-fit=cover?

Sui dispositivi con notch o angoli arrotondati, permette allo sfondo della tua pagina di estendersi in quegli inset di safe-area invece di lasciare una barra nera, mentre usi le funzioni CSS env(safe-area-inset-*) per mantenere il contenuto stesso lontano dal notch.

width=device-width è sempre corretto?

Per la stragrande maggioranza dei siti responsive, sì — fa sì che il viewport CSS corrisponda alla larghezza naturale del dispositivo, così i tuoi breakpoint responsive si comportano in modo prevedibile.

Categoria: Sviluppo

Generatore di Meta Tag Viewport

Idea internaManca uno strumento?

Genera un meta tag viewport responsive e comprendine le opzioni

Imposta larghezza, scala iniziale, limiti di zoom, permesso di zoom con pizzico e adattamento del viewport per il meta tag viewport della tua pagina, con una breve spiegazione di ogni opzione, e copia il tag finito nel tuo <head>. Creato localmente nel tuo browser.

LarghezzaDi solito "device-width", così il layout corrisponde alla larghezza in pixel CSS dello schermo.Scala inizialeIl livello di zoom al primo caricamento; 1 significa nessuno zoom.Scala minimaScala massimaLascia vuoto per permettere ai visitatori di ingrandire liberamente entro qualsiasi limite.Adattamento viewport"cover" consente al contenuto di estendersi negli inset di notch/safe-area sui dispositivi che li supportano.

Consenti zoom con pizzico (user-scalable)

Disattivare questa opzione blocca lo zoom con pizzico, il che danneggia l'accessibilità — la maggior parte dei siti dovrebbe lasciarla attiva.

Meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Il meta tag viewport indica a un browser mobile come dimensionare e ridimensionare una pagina — senza di esso, i telefoni renderizzano le pagine a una larghezza fissa simile al desktop e con lo zoom ridotto, motivo per cui è una delle prime cose che un controllo di compatibilità mobile verifica. Impostare width=device-width e initial-scale=1 copre il caso comune, ma vale la pena capire i limiti di scala e le opzioni di viewport-fit invece di copiarli ciecamente, dato che disabilitare completamente lo zoom è un problema di accessibilità per gli utenti ipovedenti.

Come si usa

Lascia la larghezza come "device-width" a meno che tu non abbia un motivo specifico per cambiarla.
Imposta una scala iniziale e, facoltativamente, limiti minimi/massimi di zoom.
Decidi se consentire lo zoom con pizzico — si consiglia di lasciarlo attivo.
Scegli un valore di viewport-fit se il tuo design deve estendersi negli inset di notch o safe-area.
Copia il tag generato nel <head> della tua pagina.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Devo disabilitare user-scalable per evitare zoom "accidentali"?: In generale no — bloccare lo zoom con pizzico impedisce ai visitatori ipovedenti di ingrandire per leggere i tuoi contenuti, cosa segnalata dalle linee guida sull'accessibilità (WCAG 1.4.4). Correggi i problemi di layout invece di disabilitare lo zoom.
Cosa fa esattamente viewport-fit=cover?: Sui dispositivi con notch o angoli arrotondati, permette allo sfondo della tua pagina di estendersi in quegli inset di safe-area invece di lasciare una barra nera, mentre usi le funzioni CSS env(safe-area-inset-*) per mantenere il contenuto stesso lontano dal notch.
width=device-width è sempre corretto?: Per la stragrande maggioranza dei siti responsive, sì — fa sì che il viewport CSS corrisponda alla larghezza naturale del dispositivo, così i tuoi breakpoint responsive si comportano in modo prevedibile.