Come funziona il metatag VIEWPORT

VIEWPORT indica ai dispositivi mobili orientamento e dimensione della pagina web

---

metatag VIEWPORT: ottimizzare i siti web per i dispositivi mobili

E' in forte aumento la percentuale di navigatori che utilizza dispositivi mobili. Si rende dunque sempre più importante ottimizzare le pagine web per gli schermi di smartphone e tablet.

Il primo passo da fare è inserire il metatag VIEWPORT nel'header del sito web:

Questo farà sì che il sito web venga visualizzato a tutto schermo, senza ridimensionare nulla.

Sintassi del metatag VIEWPORT

il metatag VIEWPORT può controllare alcuni parametri. Oltre alla larghezza dello schermo (device-width) che abbiamo appena visto, si possono specificare anche i seguenti valori:
Viewport height:

Regola l'altezza della pagina web. Si possono indicare valori fissi in pixel, oppure si può usare la locuzione device-height che fa sì che venga sfruttata l'intera altezza dello schermo del dispositivo mobile.

<meta name="viewport" content="width=device-width, height=device-height">
Initial scale:

Indica il valore da utilizzare per lo zoom iniziale.

<meta name="viewport" content="width=device-width, initial-scale=2">
Controllare lo zoom:

I parametri maximum-scale e minimum-scale permettono di imporre un limite allo zoom del dispositivo mobile

<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5">

Lo zoom può anche essere completamente disabilitato:
<meta name="viewport" content="width=device-width, user-scalable=no">

High-DPI Screen

Sui dispositivi Android e su alcuni altri smartphone e tablet è possibile controllare la risoluzione dello schermo anche con target-densitydpi:

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

target-densitydpi supporta i seguenti valori:

 - device-dpi: Utilizza la risoluzione nativa dello schermo del dispositivo. Non sarà necessario nessun ridimensionamento.

 - high-dpi: Utilizza la massima risoluzione. Gli schermi a bassa e media densità si riscaleranno verso il basso.

 - medium-dpi: Usa una risoluzione media. E' il settaggio standard. Gli schermi ad alta densità scaleranno verso l'alto, e quelli a bassa densità riscaleranno verso il basso.

 - low-dpi: Utilizza la risoluzione più bassa. Gli schermi a media ed alta densità riscaleranno verso l'alto.

---