Il tag meta viewport è un elemento HTML <meta> posto nell'<head> di una pagina web che dice ai browser mobile come impostare la larghezza e il livello di zoom iniziale della pagina. Senza di esso, i browser mobile renderizzano per default come se lo schermo fosse largo 980 pixel, poi rimpiccioliscono il tutto per farlo entrare. Il risultato: testo alto a malapena 4 pixel, utenti che fanno pinch per zoomare, e una segnalazione "La pagina non sembra mobile-friendly" in ogni audit di SEO e accessibilità. La correzione è una riga di HTML. Quasi ogni tema WordPress moderno la include, ma molti temi più vecchi o personalizzati la omettono ancora.
Come si presenta il tag meta viewport, e qual è il valore corretto?
Il tag meta viewport standard raccomandato nel 2026 è:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Questo dice al browser due cose. Primo, imposta la larghezza del viewport di layout uguale alla larghezza dello schermo del dispositivo (invece del default legacy di 980px). Secondo, renderizza la pagina a zoom 1:1 al primo caricamento (invece di un'anteprima ridotta). Queste due impostazioni insieme sono ciò che fa sì che un layout CSS responsive si comporti davvero in modo responsive sui telefoni.
Il tag va il più in alto possibile in <head>, idealmente direttamente dopo la dichiarazione <meta charset>. I browser lo parsano presto e lo usano prima di disporre qualsiasi altra cosa.
Perché il tag meta viewport è necessario?
Il motivo della sua esistenza è storico. Quando l'iPhone fu lanciato nel 2007, il web mobile non esisteva veramente. La maggior parte dei siti web era progettata per monitor desktop da 1024 pixel. La scelta di ingegneria di Apple: renderizzare ogni pagina come se il dispositivo fosse largo 980 pixel, poi rimpicciolirla per farla entrare nello schermo da 320 pixel. Gli utenti potevano fare pinch e zoom. Questo era il peggior default possibile per siti genuinamente mobile-aware, quindi Apple introdusse un tag meta a cui i siti mobile-friendly potevano aderire: width=device-width. La convenzione si è diffusa a ogni altro browser mobile, e 17 anni dopo è ancora il meccanismo.
L'implicazione pratica per un sito WordPress: se il tuo tema è responsive (cosa che essenzialmente è ogni tema dal 2014 in poi), ma il tag meta viewport manca, i browser non sanno che il tuo CSS è responsive. Applicano il fallback legacy di 980 pixel, le tue media query non scattano mai, e il sito appare rotto su mobile anche se il CSS avrebbe funzionato.
Quali sono i parametri del tag meta viewport?
L'attributo content è una lista di parametri separati da virgole. I due essenziali coprono il 99% dei casi; gli altri sono situazionali.
width=device-width. Imposta il viewport di layout per corrispondere alla larghezza dello schermo del dispositivo. Includilo sempre. L'alternativa è un valore fisso in pixel (width=1024), che essenzialmente non è mai la scelta giusta per un sito moderno.initial-scale=1.0. Imposta il livello di zoom quando la pagina si carica per la prima volta.1.0significa nessun zoom (1 pixel CSS = 1 pixel di layout). Includilo sempre. Senza, alcuni browser Android storicamente hanno applicato livelli di zoom inaspettati.minimum-scaleemaximum-scale. Impostano i limiti per il pinch-to-zoom dell'utente. Meglio lasciarli fuori. Limitare lo zoom dell'utente è una violazione dell'accessibilità sotto WCAG 2.1 (criterio di successo 1.4.4 "Ridimensionare il testo") e Google lo considera un problema di usabilità mobile. Gli utenti ipovedenti dipendono dallo zoom per leggere il testo.user-scalable=no. Disabilita completamente il pinch-to-zoom. Stesso problema di accessibilità di sopra. Alcune single-page app e siti di giochi lo usano, ma per qualsiasi sito guidato da contenuti (blog, negozio, pagina marketing) danneggia attivamente gli utenti. I browser moderni ignoranouser-scalable=noin Safari e Firefox specificamente per proteggere l'accessibilità.viewport-fit=cover. Dice a iOS di estendere il layout sotto il notch e l'indicatore home su iPhone X e successivi. Necessario se hai un design full-bleed che deve raggiungere i bordi dello schermo. Se il tuo sito ha padding standard intorno al contenuto, puoi ignorarlo.interactive-widget. Proprietà più nuova (2023+) che controlla come la tastiera virtuale interagisce con il viewport. Il comportamento di default va bene per la maggior parte dei siti.
Cosa va storto quando manca il tag meta viewport?
Quattro sintomi, tutti visibili immediatamente su un telefono:
- Il testo è microscopico. L'intera pagina è schiacciata nella larghezza dello schermo, quindi un testo corpo da 16px renderizza a forse 4-5px di pixel reali. Gli utenti devono fare pinch-zoom per leggere.
- Compare lo scroll orizzontale. La pagina è disposta a 980px di larghezza su uno schermo da 390px, quindi c'è un significativo overflow orizzontale. Gli utenti devono scorrere lateralmente oltre che in basso.
- Pulsanti e link sono troppo piccoli da toccare. Apple raccomanda un target di tocco minimo di 44x44 punti. Ridotti di un fattore 2,5 diventano 17x17 pixel reali, ben al di sotto di ciò che le dita possono colpire in modo affidabile.
- Google Search Console segnala la pagina. Il rapporto Usabilità Mobile mostra errori "Viewport non impostato" o "Contenuto più largo dello schermo". Dall'indicizzazione mobile-first (completamente lanciata nel 2021), Google indicizza principalmente la versione mobile del tuo sito, e le pagine con problemi di usabilità mobile possono ottenere rank inferiori.
Come verifico se il mio sito WordPress ha un tag meta viewport?
Quattro modi, il più veloce per primo:
- Report InspectWP. La sezione HTML segnala se un tag meta viewport è presente, quale valore ha e se restringe lo zoom dell'utente.
- Visualizza sorgente pagina. Clic destro sulla pagina, "Visualizza sorgente pagina" (o Cmd/Ctrl+U), cerca "viewport". Dovresti trovare un tag
<meta name="viewport">. Zero significa che manca. Due o più significa che c'è un conflitto da qualche parte nel tuo tema. - Emulazione mobile Chrome DevTools. Apri DevTools (F12), clicca l'icona della barra strumenti dispositivo. Se la pagina renderizza zoomata fuori e minuscola nel preset iPhone 14, il tag meta viewport manca o è sbagliato.
- Google Search Console. Sotto "Esperienza pagina, Usabilità mobile", qualsiasi pagina senza tag viewport viene elencata esplicitamente.
Come aggiungo il tag meta viewport in WordPress?
Tre scenari, a seconda di come è costruito il tuo tema:
Il tema lo include già (la maggior parte dei temi moderni)
Ogni tema WordPress predefinito da Twenty Fourteen (2013) include il tag meta viewport corretto nel suo header.php. I temi a blocchi (Twenty Twenty-Two in poi) lo includono automaticamente tramite l'editor. Quasi ogni tema commerciale di Astra, GeneratePress, Kadence, Avada, Divi, Elementor Hello, ecc. lo include. Verifica prima il view-source: se è già lì, non fare nulla.
Il tema non lo include (temi più vecchi o personalizzati)
Aggiungilo all'header.php del tuo tema, subito dopo la riga <meta charset>:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Se non vuoi modificare i file del tema (perché il tema non è tuo, o per sopravvivere agli aggiornamenti del tema), usa un child theme o aggiungilo tramite uno snippet in functions.php:
add_action('wp_head', function () {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' . "\n";
}, 1);La priorità 1 assicura che venga emesso molto presto nell'<head>. Il comportamento del browser è più prevedibile quando viewport è uno dei primi tag.
Vedi due tag viewport (conflitto)
Alcuni plugin (plugin PWA stile app mobile, plugin AMP, certi page builder) iniettano il proprio tag viewport. Se anche il tuo tema ne emette uno, ti ritrovi con due, e i browser usano il primo che incontrano. Sintomi: la pagina a volte renderizza correttamente e a volte no, a seconda di cosa ha caricato per primo. Correzione: identifica il duplicato (cerca "viewport" nell'HTML renderizzato), poi disabilita l'output sbagliato. Le impostazioni del plugin di solito hanno un toggle per sopprimere la sua iniezione viewport.
Dovrei limitare lo zoom dell'utente per una UI in stile app?
Risposta breve: no. La tentazione viene da designer che vogliono che il sito si senta come un'app nativa, dove il pinch-to-zoom non funziona. La realtà:
- Viola WCAG 2.1. Il Criterio di Successo 1.4.4 delle Web Content Accessibility Guidelines richiede che gli utenti possano ridimensionare il testo fino al 200% senza perdita di funzionalità. Limitare lo zoom rompe questo.
- Danneggia gli utenti ipovedenti. Circa il 4% degli adulti ha qualche forma di disabilità visiva che richiede lo zoom. Per loro, la tua pagina "stile app" è illeggibile.
- I browser moderni ignorano comunque la restrizione. Safari su iOS 10+ e Firefox hanno attivamente ignorato
user-scalable=noper anni specificamente a causa del danno all'accessibilità. L'impostazione funziona solo su una minoranza in diminuzione di browser. - Danneggia il SEO. I criteri mobile-friendly di Google includono esplicitamente "la pagina non limita il pinch-to-zoom". Le pagine che lo fanno vengono segnalate in Search Console.
Se la tua UI si rompe quando gli utenti zoomano, la correzione giusta è far gestire al CSS il testo più grande con grazia, non bloccare lo zoom.
Come interagisce il tag viewport con il design responsive?
Il tag viewport e le media query CSS lavorano insieme. Il tag viewport imposta il viewport di layout (la larghezza alla quale avvengono i calcoli CSS); le media query si attivano in base a quella larghezza. Senza width=device-width, le tue media query sono valutate rispetto all'assunzione legacy di 980px, quindi una regola @media (max-width: 768px) non si attiva mai su un iPhone da 390px (perché il browser pensa che il viewport di layout sia largo 980px).
Questa è la causa più comune di "il mio design responsive non funziona" su un sito WordPress: il CSS è a posto, le media query sono corrette, ma il tag viewport manca o è sbagliato, quindi il browser non entra mai in modalità mobile. Aggiungere una riga di HTML lo risolve.
Errori comuni
- Usare una larghezza fissa come
width=1024. Forza ogni dispositivo a renderizzare a 1024px, vanificando l'intero scopo. Quasi sempre un errore di copia-incolla da un tutorial obsoleto. - Impostare
initial-scalea qualcosa diverso da 1.0. Valori come0.5o2.0significano che la pagina carica pre-zoomata in entrata o uscita. Gli utenti cercano immediatamente di tornare allo zoom normale. Sempre 1.0. - Limitare lo zoom con
user-scalable=noomaximum-scale=1. Violazione dell'accessibilità, penalità SEO, ignorato comunque da Safari e Firefox moderni. Rimuovilo e basta. - Dimenticare
viewport-fit=coversui design full-bleed iPhone X+. Il contenuto non raggiunge i bordi dello schermo; ottieni bande bianche in alto e in basso intorno al notch e all'indicatore home. Aggiungi il parametro se il design intende edge-to-edge. - Aggiungere il tag con PHP
echofuori dall'<head>. Un tag nel<body>è HTML non valido e i browser lo ignorano. Il tag deve essere all'interno dell'<head>.
Cosa controlla InspectWP
La sezione HTML di ogni report InspectWP verifica che un tag meta viewport sia presente e riporta il suo valore content. Se il tag manca, il report lo segnala come avvertimento poiché è un prerequisito quasi universale di usabilità mobile. Se user-scalable=no o maximum-scale è impostato per limitare lo zoom, ciò viene segnalato come problema di accessibilità. Il controllo è indipendente dal fatto che il designer del tema intendesse un layout responsive; ciò che conta è se il tag è effettivamente presente nell'HTML che vede il browser. Un sito può avere un framework CSS responsive perfetto e fallire comunque questo controllo se il tag viewport è andato perso durante una migrazione del tema o un conflitto tra plugin.