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:
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:
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: