Meta Viewport HTML

Manuale completo del meta tag viewport

Tutto ciò che devi sapere per controllare zoom e layout sui dispositivi mobili

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Il tag viewport dice al browser come scalare e dimensionare la pagina sui dispositivi mobili. Senza di esso, i browser mobile fingono di avere uno schermo largo circa 980px e rimpiccioliscono tutto, rendendo il sito illeggibile su smartphone.
Proprietà disponibili
width Consigliato

Imposta la larghezza del viewport logico. Quasi sempre si usa device-width.

width=device-widthUsa la larghezza reale del dispositivo — quasi sempre quello che vuoi
width=500Forza una larghezza fissa di 500px — sconsigliato per layout responsive
height Raramente usato

Imposta l'altezza del viewport. Il browser la gestisce automaticamente, quindi viene usato solo in casi molto specifici.

height=device-heightUsa l'altezza reale del dispositivo
height=800Forza un'altezza fissa di 800px
initial-scale Consigliato

Zoom iniziale quando la pagina si carica. Il valore 1.0 corrisponde a nessuno zoom: la pagina occupa il 100% del viewport.

initial-scale=1.0Nessuno zoom iniziale — standard per qualsiasi sito responsive
initial-scale=0.5La pagina appare rimpicciolita al 50% all'apertura
initial-scale=2.0La pagina appare ingrandita al 200% all'apertura
minimum-scale Opzionale

Quanto l'utente può rimpicciolire al massimo (zoom out). Il range accettato è da 0.1 a 10.

minimum-scale=0.5L'utente può ridurre la pagina fino al 50%
minimum-scale=1.0L'utente non può rimpicciolire oltre il 100%
maximum-scale Attenzione accessibilità

Quanto l'utente può ingrandire al massimo (zoom in). Il range accettato è da 0.1 a 10.

maximum-scale=1.0Blocca completamente lo zoom in — sconsigliato per siti pubblici
maximum-scale=3.0L'utente può ingrandire fino al 300%
maximum-scale=5.0Permette uno zoom generoso — buona scelta per l'accessibilità
⚠️
Impostare maximum-scale=1.0 blocca lo zoom per gli utenti ipovedenti. Le linee guida WCAG 1.4.4 lo considerano una violazione dell'accessibilità. Safari su iOS dal 2022 ignora questo parametro per ragioni di accessibilità.
user-scalable Attenzione accessibilità

Abilita o disabilita completamente il pinch-to-zoom dell'utente.

user-scalable=yesPermette il pinch-to-zoom — valore di default
user-scalable=noBlocca il pinch-to-zoom — sconsigliato per siti pubblici
user-scalable=1Equivalente a yes
user-scalable=0Equivalente a no
⚠️
Safari iOS e Chrome Android recenti ignorano questo parametro quando l'utente ha attivato le impostazioni di accessibilità del dispositivo.
viewport-fit iPhone con notch

Controlla come il contenuto si adatta ai display con notch (iPhone X e successivi) o bordi curvi.

viewport-fit=autoComportamento default — il contenuto rispetta le aree sicure attorno al notch
viewport-fit=containIl contenuto rimane dentro l'area sicura, non va sotto il notch
viewport-fit=coverIl contenuto si estende sotto il notch/bordi curvi — da usare con le variabili CSS safe-area-inset-*
Esempio CSS per viewport-fit=cover: 
body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
}
Riepilogo proprietà
Proprietà Valori comuni Default
width device-width, numero px 980px
height device-height, numero px automatico
initial-scale 0.1 – 10 1.0
minimum-scale 0.1 – 10 0.1
maximum-scale 0.1 – 10 10
user-scalable yes / no / 1 / 0 yes
viewport-fit auto / contain / cover auto
Esempi pratici
✅ Standard — responsive senza restrizioni (raccomandato)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
La scelta corretta per qualsiasi sito web pubblico. Permette lo zoom e si adatta a ogni schermo.
⚙️ App web gestionale con pinch-to-zoom bloccato
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Usato tipicamente in applicazioni touch (es. gestionali, magazzino, POS) dove lo zoom accidentale romperebbe il layout. Non adatto a siti pubblici.
📱 Con supporto notch iPhone (app full-screen)
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
Permette al contenuto di estendersi sotto il notch. Va abbinato alle variabili CSS safe-area-inset-* per evitare che elementi importanti vengano nascosti.
♿ Zoom limitato ma accessibile (compromesso)
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0" />
Permette all'utente di ingrandire fino al 300% (utile per ipovedenti) senza poter rimpicciolire oltre il 100%. Buon compromesso tra controllo del layout e accessibilità.

Esplorando Blazor Server: Creazione di Applicazioni Web Interattive con. NET

Blazor è un framework open source sviluppato da Microsoft che consente di creare applicazioni web moderne utilizzando C# e .NET. In questa pagina, esploreremo i concetti fondamentali di Blazor Server e come iniziare a creare applicazioni web coinvolgenti utilizzando questo potente framework.

Introduzione a Blazor Server

Blazor Server è un modello di hosting Blazor in cui l'applicazione viene eseguita sul server. Le interazioni utente vengono gestite tramite SignalR, una libreria per la comunicazione in tempo reale. Questo approccio è ideale per applicazioni che richiedono una logica complessa o un accesso sicuro ai dati sul server.

Componenti Blazor

Il nucleo di Blazor sono i componenti, che sono elementi riutilizzabili che compongono l'interfaccia utente delle applicazioni. I componenti Blazor sono simili ai componenti React o agli elementi Web di Angular. Ogni componente Blazor può contenere codice C# e markup HTML, offrendo un'esperienza di sviluppo intuitiva e familiare.

Come iniziare con Blazor Server

Per iniziare a sviluppare applicazioni con Blazor Server, è possibile utilizzare Visual Studio o Visual Studio Code insieme agli strumenti di sviluppo .NET. Seguire questi passaggi di base:

  1. Creare un nuovo progetto Blazor Server utilizzando il modello appropriato.
  2. Definire i componenti e le pagine dell'applicazione utilizzando C# e HTML.
  3. Implementare la logica dietro i componenti utilizzando C#.
  4. Eseguire e testare l'applicazione nel browser.

Conclusioni

Questi sono solo alcuni dei concetti fondamentali di Blazor Server che abbiamo esplorato in questa guida. Continuate a esplorare Blazor Server e godetevi lo sviluppo di applicazioni web interattive utilizzando C# e .NET!

Introduzione a Blazor WebAssembly: Sviluppo Web Interattivo con .NET nel Browser

Benvenuti nella nostra guida introduttiva a Blazor WebAssembly! In questo articolo, esploreremo cos'è Blazor WebAssembly, come funziona e come può essere utilizzato per creare applicazioni web interattive utilizzando .NET direttamente nel browser.

Cos'è Blazor WebAssembly?

Blazor WebAssembly è un framework di sviluppo web open source sviluppato da Microsoft. Consente agli sviluppatori di utilizzare il linguaggio di programmazione C# e il framework .NET per creare applicazioni web interattive e performanti che vengono eseguite direttamente nel browser, senza la necessità di plugin o di ricorrere a JavaScript.

Come funziona Blazor WebAssembly?

Blazor WebAssembly si basa sulla tecnologia WebAssembly, che è uno standard web supportato da tutti i principali browser. WebAssembly consente di eseguire codice compilato in linguaggi come C, C++, e ora anche C#, direttamente nel browser a velocità native, garantendo prestazioni elevate e un'esperienza utente fluida.

Con Blazor WebAssembly, l'applicazione viene compilata in codice WebAssembly insieme al runtime .NET, consentendo agli sviluppatori di scrivere applicazioni web utilizzando .NET e di eseguirle direttamente nel browser come applicazioni web progressive (PWA).

Vantaggi di Blazor WebAssembly:

  • Utilizzo di .NET e C#: Gli sviluppatori possono utilizzare il linguaggio di programmazione C# e il framework .NET per sviluppare applicazioni web, sfruttando le proprie competenze esistenti e le librerie di .NET.
  • Prestazioni elevate: Grazie all'esecuzione del codice a velocità native nel browser, le applicazioni Blazor WebAssembly offrono prestazioni elevate e reattività.
  • Riusabilità del codice: I componenti e le librerie .NET possono essere riutilizzati sia lato client che lato server, consentendo una maggiore riusabilità del codice e una manutenzione semplificata.
  • Debugging: Gli strumenti di debugging e di sviluppo integrati di Visual Studio e Visual Studio Code supportano pienamente lo sviluppo di applicazioni Blazor WebAssembly, semplificando il processo di sviluppo e debug.

Come iniziare con Blazor WebAssembly:

  1. Creare un nuovo progetto Blazor WebAssembly utilizzando il modello appropriato.
  2. Definire i componenti e le pagine dell'applicazione utilizzando C# e HTML.
  3. Implementare la logica dietro i componenti utilizzando C#.
  4. Eseguire e testare l'applicazione nel browser.

Conclusioni:

Blazor WebAssembly offre agli sviluppatori la possibilità di creare applicazioni web moderne e performanti utilizzando .NET direttamente nel browser. Con la sua sintassi familiare, le prestazioni elevate e il supporto completo degli strumenti di sviluppo, Blazor WebAssembly è una scelta eccellente per lo sviluppo di applicazioni web interattive. Continuate a esplorare Blazor WebAssembly e godetevi lo sviluppo web con .NET nel browser!

Esplorando Blazor: Creazione di Applicazioni Web Interattive

Benvenuti nella nostra guida alla creazione di applicazioni web interattive con Blazor! Blazor è un framework open source sviluppato da Microsoft che consente di creare applicazioni web moderne utilizzando C# e .NET. In questa pagina, esploreremo i concetti fondamentali di Blazor e come iniziare a creare applicazioni web coinvolgenti utilizzando questo potente framework.

Introduzione a Blazor

Blazor offre la possibilità di creare applicazioni web utilizzando il linguaggio di programmazione C# anziché JavaScript. Questo significa che gli sviluppatori .NET possono sfruttare le proprie competenze esistenti per sviluppare applicazioni web senza dover imparare un nuovo linguaggio.

Componenti Blazor

Il nucleo di Blazor sono i componenti, che sono elementi riutilizzabili che compongono l'interfaccia utente delle applicazioni. I componenti Blazor sono simili ai componenti React o agli elementi Web di Angular. Ogni componente Blazor può contenere codice C# e markup HTML, offrendo un'esperienza di sviluppo intuitiva e familiare.

Tipi di Blazor

Blazor offre due modelli di hosting principali:

  • Blazor Server: In questo modello, l'applicazione Blazor viene eseguita sul server e le interazioni utente vengono gestite tramite SignalR, una libreria per la comunicazione in tempo reale. Questo approccio è ideale per applicazioni che richiedono una logica complessa o un accesso sicuro ai dati sul server.
  • Blazor WebAssembly: In questo modello, l'applicazione Blazor viene eseguita direttamente nel browser utilizzando WebAssembly, consentendo un'esperienza utente più veloce e reattiva. Questo approccio è ottimale per applicazioni che richiedono una maggiore interattività e che possono essere distribuite come applicazioni web progressive (PWA).

Conclusioni

Questi sono solo alcuni dei concetti fondamentali di Blazor che abbiamo esplorato in questa guida. Continuate a esplorare Blazor e godetevi lo sviluppo di applicazioni web interattive utilizzando C# e .NET!