Generatore di meta tag viewport per siti responsive

Scelga device-width per la dichiarazione standard adatta ai dispositivi mobili oppure inserisca una larghezza numerica positiva per un viewport fisso intenzionale, quindi imposti la scala iniziale. Il risultato comprende un tag HTML completo pronto da copiare nell’head del documento, il relativo valore content e impostazioni normalizzate utili per script, modelli, test e pipeline di build automatizzate.

Scelga consapevolmente la larghezza del viewport

Una dichiarazione viewport comunica al browser mobile come il viewport di layout della pagina deve rapportarsi allo schermo. Per la maggior parte dei siti responsive, device-width è l’impostazione corretta perché segue la larghezza del dispositivo in pixel CSS e consente alle media query di reagire allo spazio disponibile. Il generatore accetta anche una larghezza numerica positiva quando serve davvero un viewport fisso e controllato, per esempio in un’interfaccia incorporata legacy, in un fixture riproducibile del browser o in un test di compatibilità. Inserisca il numero senza il suffisso px: 375 è valido, mentre 375px non è un valore di larghezza valido per questa dichiarazione. Zero, valori negativi, input vuoti, valori non finiti e parole arbitrarie vengono rifiutati invece di finire in un markup apparentemente plausibile ma scorretto. La larghezza restituita viene normalizzata, quindi un testo numerico come 375 diventa il frammento stabile width=375. Questa validazione rende l’output affidabile per l’automazione: il successo garantisce la parola chiave standard esatta o un numero positivo, senza correzioni nascoste o supposizioni dipendenti dal browser.

Imposti la scala iniziale e copi il tag

La scala iniziale controlla il livello di zoom al primo caricamento della pagina. Il valore 1 è la scelta convenzionale: un pixel CSS corrisponde a un pixel CSS del viewport prima che l’utente esegua lo zoom. Il campo usa 1 come valore predefinito, ma Lei può fornire un altro numero positivo e finito per una specifica esigenza applicativa o di test. Il generatore convalida separatamente questa impostazione e ne conserva il significato numerico in una forma testuale stabile. Produce quindi un tag completo come <meta name="viewport" content="width=device-width, initial-scale=1">. Lo inserisca nell’head del documento, preferibilmente una sola volta, invece di aggiungere più dichiarazioni viewport la cui interazione può cambiare tra browser. La risposta espone anche la stringa content e i campi normalizzati width e initial_scale. Usi meta_tag per scrivere HTML, content quando un framework richiede soltanto tale attributo e i singoli campi per verificare la configurazione nei test. Nessuna richiesta di rete, ispezione della pagina o rilevazione dello user agent modifica il risultato: input identici producono sempre output identici nel browser e tramite API.

Comprenda cosa non viene aggiunto

Questa capacità genera intenzionalmente soltanto width e initial-scale. Non aggiunge maximum-scale, minimum-scale, user-scalable, viewport-fit, interactive-widget o altre direttive facoltative, perché tali impostazioni richiedono decisioni di prodotto e accessibilità, non valori automatici. Limitare lo zoom, in particolare, può rendere i contenuti più difficili da usare per chi necessita di ingrandirli; un generatore essenziale non dovrebbe introdurre silenziosamente questo comportamento. Lo strumento non esamina una pagina esistente, non rileva tag duplicati, non prova i breakpoint responsive e non dimostra che il CSS sia davvero adattivo. Crea markup deterministico dalle due impostazioni fornite. Dopo aver aggiunto il risultato, controlli la pagina a dimensioni strette e ampie, confermi che il testo rimanga leggibile, verifichi che i controlli non fuoriescano e provi lo zoom su browser reali. Nei progetti basati su template, mantenga la dichiarazione nel componente head condiviso affinché ogni percorso riceva la stessa politica. L’uso interattivo è gratuito nel browser; una richiesta API automatizzata costa $0.002. Poiché lo stesso risolutore puro serve entrambi i percorsi, un tag provato manualmente può entrare in uno script di build senza cambiare formato o regole di validazione.