Il metatag Viewport in HTML5

Al fine di visualizzare correttamente la dimensione di un sito web nei vari dispositivi mobile (smartphone, tablet, ipad, ecc.) è possibile sfruttare il metatag “viewport” per HTML 5 da inserire all’interno del tag head di una pagina web.

Il “viewport” rappresenta l’area di visualizzazione della pagina all’interno del browser ed è possibile modificarne i valori per permettere allo sviluppatore di controllarne la dimensione e la scala.
Solitamente il browser di un dispositivo mobile (ad esempio un iPhone vecchio modello che ha una risoluzione del browser di circa 320×356 px, vanno infatti considerati le varie barre di navigazione e stato) cerca di adattare automaticamente le dimensioni dell’area di visualizzazione di una pagina alla risoluzione del proprio schermo.
Se volessimo invece che tale adattamento automatico non avvenga e avere quindi noi la possibilità di suggerire il modo in cui deve essere gestita questa visualizzazione, dovremmo modificare il valore associati al metatag “viewport”.

Il valore standard di presentazione del “viewport” è il seguente:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

In questa riga è presente la proprietà “width” che controlla la dimensione del “viewport”, è possibile specificarlo in pixel (ad esempio width=800px) oppure utilizzare il valore “device-width” che indica che la larghezza del “viewport” deve essere scalata al 100% e quindi adattata allo schermo del dispositivo.

Se la larghezza non viene settata, automaticamente si assume come valore la risoluzione standard dei monitor di pc desktop.
Esiste anche il valore “height” e “device-height”, ma sono più utili in presenza di elementi che cambiano di dimensione o posizione a seconda dell’altezza del “viewport”.

Il valore “initial-scale” (che và da 0 a 10) rappresentano il controllo del livello di zoom quando la pagina viene caricata. Il valore standard è 1, in caso di valori minori si realizza un effetto di zoom-out ossia di rimpicciolimento dell’area di visualizzazione, mentre per valori superiori avviene un ingrandimento.
Il valore “maximum-scale” (da 0 a 10) indica il livello massimo di zoom effettuabile.
Il valore “minimum-scale” (da 0 a 10) indica il livello minimo di zoom effettuabile.
Il valore “user-scalable” (yes o no) indica la possibilità di effettuare o meno lo zoom, può essere utile quando vogliamo non vogliamo permettere che l’utenta modifichi la visualizzazione di un “viewport” già ottimizzato.

Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


cinque × = 10