Il viewport del browser è l’area della finestra in cui è possibile visualizzare il contenuto web. Spesso non ha le stesse dimensioni della pagina visualizzata, nel qual caso il browser fornisce barre di scorrimento che consentono all’utente di scorrere e accedere a tutto il contenuto.
Alcuni dispositivi mobili e altri schermi stretti eseguono il rendering delle pagine in una finestra virtuale o viewport, che in genere è più ampia dello schermo, quindi riducono il risultato renderizzato in modo che possa essere visto tutto contemporaneamente. Gli utenti possono quindi eseguire lo zoom e la panoramica per osservare più da vicino le diverse aree della pagina.
Ad esempio, se lo schermo di un dispositivo mobile ha una larghezza di 640 px, le pagine potrebbero essere visualizzate con un viewport virtuale di 980 px, quindi verranno ridotte per adattarsi allo spazio di 640 px.
Questo viene fatto perché non tutte le pagine sono ottimizzate per i dispositivi mobili e si interrompono (o almeno hanno un brutto aspetto) quando visualizzate con una larghezza del viewport ridotta. Questa visualizzazione virtuale è un modo per migliorare l’aspetto generale dei siti non ottimizzati per dispositivi mobili sui dispositivi a schermo stretto.
Tuttavia, questo meccanismo non è altrettanto valido per le pagine ottimizzate per schermi stretti che utilizzano query multimediali: se, ad esempio, il viewport virtuale è 980 px, le query multimediali che si avviano a 640 px o 480 px o meno non verranno mai utilizzate, limitando l’efficacia di tale tecniche di progettazione reattiva. L’elemento viewport <meta> mitiga questo problema del viewport virtuale su dispositivi a schermo stretto.
Viewport basics
Un esempio di tag di un sito ottimizzato per sistemi mobile:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Non tutti i dispositivi hanno la stessa larghezza; dovresti assicurarti che le tue pagine funzionino bene in un’ampia varietà di dimensioni e orientamenti dello schermo.
Gli attributi di base dell’elemento “viewport” <meta> includono:
Controlla la dimensione della finestra. Può essere impostato su un numero specifico di pixel come larghezza=600 o sul valore speciale larghezza del dispositivo, che è 100vw, o 100% della larghezza del viewport. Minimo: 1. Massimo: 10000. Valori negativi: ignorati.
Controlla la dimensione della finestra. Può essere impostato su un numero specifico di pixel come altezza=400 o sul valore speciale altezza dispositivo, che è 100vh, o 100% dell’altezza del viewport. Minimo: 1. Massimo: 10000. Valori negativi: ignorati.
initial-scale
Controlla il livello di zoom al primo caricamento della pagina. Minimo: 0,1. Massimo: 10. Predefinito: 1. Valori negativi: ignorati.
minimum-scale
Controlla la quantità di zoom indietro consentita sulla pagina. Minimo: 0,1. Massimo: 10. Impostazione predefinita: 0,1. Valori negativi: ignorati.
maximum-scale
Controlla la quantità di zoom consentita sulla pagina. Qualsiasi valore inferiore a 3 non consente l’accessibilità. Minimo: 0,1. Massimo: 10. Predefinito: 10. Valori negativi: ignorati.
user-scalable
Controlla se le azioni di ingrandimento e riduzione sono consentite nella pagina. Valori validi: 0, 1, sì o no. Impostazione predefinita: 1, che equivale a sì. Impostare il valore su 0, che equivale a no, è contrario alle Linee guida per l’accessibilità dei contenuti Web (WCAG).
interactive-widget
Specifica l’effetto che i widget dell’interfaccia utente interattivi, come una tastiera virtuale, hanno sulle finestre della pagina. Valori validi: ridimensiona-visuale, ridimensiona-contenuto o sovrappone-contenuto. Predefinito: ridimensiona-visivo.
Avvertenza: l’utilizzo di user-scalable=no può causare problemi di accessibilità agli utenti con problemi di vista come ipovedenti. WCAG richiede un ridimensionamento minimo di 2×; tuttavia, la procedura migliore è abilitare uno zoom 5×.
Densità dello schermo
Le risoluzioni dello schermo sono aumentate al punto che i singoli pixel sono indistinguibili dall’occhio umano. Ad esempio, gli smartphone hanno spesso schermi piccoli con risoluzioni fino a 1920–1080 pixel (≈400 dpi). Per questo motivo, molti browser possono visualizzare le proprie pagine in dimensioni fisiche inferiori traducendo più pixel hardware per ciascun “pixel” CSS. Inizialmente, ciò causava problemi di usabilità e leggibilità su molti siti Web ottimizzati per il tocco.
Sugli schermi ad alto dpi, le pagine con scala iniziale=1 verranno effettivamente ingrandite dai browser. Il testo sarà fluido e nitido, ma le immagini bitmap potrebbero non sfruttare la risoluzione dello schermo intero. Per ottenere immagini più nitide su questi schermi, gli sviluppatori web potrebbero voler progettare immagini – o interi layout – su una scala maggiore rispetto alla dimensione finale e quindi ridimensionarle utilizzando le proprietà CSS o viewport.
Il rapporto pixel predefinito dipende dalla densità del display. Su un display con densità inferiore a 200 dpi, il rapporto è 1,0. Sui display con densità compresa tra 200 e 300 dpi, il rapporto è 1,5. Per i display con densità superiore a 300 dpi, il rapporto è il piano intero (densità/150 dpi). Tieni presente che il rapporto predefinito è vero solo quando la scala della finestra è uguale a 1. Altrimenti, la relazione tra pixel CSS e pixel del dispositivo dipende dal livello di zoom corrente.
Larghezza del viewport e larghezza dello schermo
I siti possono impostare la propria visualizzazione su una dimensione specifica. Ad esempio, la definizione “larghezza=320, scala iniziale=1” può essere utilizzata per adattarsi perfettamente al display di un piccolo telefono in modalità verticale. Ciò può causare problemi quando il browser esegue il rendering di una pagina a dimensioni maggiori. Per risolvere questo problema, i browser espanderanno la larghezza del viewport, se necessario, per riempire lo schermo nella scala richiesta. Ciò è particolarmente utile sui dispositivi a schermo grande.
Per le pagine che impostano una scala iniziale o massima, ciò significa che la proprietà larghezza si traduce effettivamente in una larghezza minima del viewport. Ad esempio, se il tuo layout necessita di almeno 500 pixel di larghezza, puoi utilizzare il seguente markup. Quando lo schermo è largo più di 500 pixel, il browser espanderà la finestra (anziché ingrandirla) per adattarla allo schermo:
htm
<meta name="viewport" content="width=500, scala iniziale=1" >
Altri attributi disponibili sono scala minima, scala massima e scalabile dall’utente. Queste proprietà influiscono sulla scala e sulla larghezza iniziali, oltre a limitare le modifiche al livello di zoom.
L’effetto dei widget dell’interfaccia utente interattiva
I widget dell’interfaccia utente interattiva del browser possono influenzare la dimensione delle finestre della pagina. Il widget dell’interfaccia utente più comune di questo tipo è una tastiera virtuale. Per controllare quale comportamento di ridimensionamento deve utilizzare il browser, imposta la proprietà Interactive-Widget.
I valori consentiti sono:
resizes-visual
La finestra visiva viene ridimensionata dal widget interattivo.
resizes-content
La finestra viene ridimensionata dal widget interattivo.
overlays-content
Né la vista né la vista visiva vengono ridimensionate dal widget interattivo.
Quando la finestra viene ridimensionata, viene ridimensionato anche il blocco contenitore iniziale, influenzando così la dimensione calcolata delle unità della finestra.
