Questo sito usa i cookie (anche di terze parti), per fornirti una migliore esperienza di navigazione. Continuando a navigare ne accetti l'utilizzo. Maggiori informazioni Chiudi

Come funziona il metatag VIEWPORT

VIEWPORT indica ai dispositivi mobili orientamento e dimensione della pagina web



Come funziona il metatag VIEWPORT


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:

<META NAME="viewport" content="width=device-width,initial-scale=1">

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.



fabbricasiti.it

Realizzazione Siti Web Professionali, Realizzazione E-commerce Professionali
Profilo Google+ di Fabbricasiti Profilo Twitter di Fabbricasiti.com
Siti Web Professionali
Fabbricasiti: Realizzazione Siti Web Professionali ed E-commerceFABBRICASITI - seo specialist