Il meta tag Viewport: utilizzo e modifica dinamica in base alla densità dello schermo



Quando si approccia lo sviluppo di una webapp in HTML5, una delle prime cose da definire è il meta tag viewport.

Se inserito nella sezione <head> delle pagine ottimizzate per smartphones, viewport indica al browser che la sta mostrando le dimensioni della pagina e il livello di zoom da utilizzare nella visualizzazione.

Un esempio può essere questo:

<meta name="viewport" content=" user-scalable = no, target-densitydpi = device-dpi, initial-scale=1, maximum-scale=1, width=320"/>

che fissa una larghezza di pagina di 320 pixel e uno zoom predefinito a 1.



Da notare l'utilizzo del valore device-dpi per la proprietà target-densitydpi: gli altri valori utilizzabili sono low-dpi (120 dpi), medium-dpi (160 dpi) e high-dpi (240 dpi).

Un'applicazione costruita per il iPhone di solito utilizza il valore medium-dpi se la densità dello schermo è inferiore al medium-dpi (es. iPhone 3G), e  l'interfaccia utente apparirà leggermente più grande del normale, risultando comunque accettabile.

Tuttavia, se la densità è maggiore del medium-dpi (es. iPhone 4/5, iPad) l'interfaccia utente si restringe, risultando più piccola e meno leggibile del previsto.

Per correggere questo, è necessario impostare il valore del target-densitydpi da device-dpi a  medium-dpi per dispositivi con risoluzioni più elevate, utilizzando la funzione window.devicePixelRatio disponibile sui browser basati su WebKit.

Ecco un breve snippet che si occupa di questa operazione:


Published: May 30 2013

  • category: