Settare lo zoom predefinito in un sito per l'iPhone
13 Settembre 2011
I layout dei siti Web creati per la visualizzazione tramite dispositivi mobili non possono essere concepiti nello stesso modo di quelli destinati per la fruizione tramite Pc; device come l'iPhone mettono infatti a disposizione un'area di visualizzazione (viewport) più limitata rispetto a quella dei monitor dei personal computer, ne consegue l'utilizzo continuo dello zoom per rendere maggiormente fruibili contenuti specifici.
Per risolvere questa problematica è possibile tener conto di alcuni accorgimenti come per esempio quello di settare la larghezza delle pagine sulla base di quella dell'area di visualizzazione di un dispositivo; questo risultato potrà essere ottenuto inserendo all'interno dei tag "head" (intestazioni di pagina) la seguente istruzione:
Nello stesso modo, sarà possibile settare la scala iniziale per lo zoom con un valore predefinito dallo sviluppatore, come nell'esempio seguente in cui essa viene impostata su "1.0"
Sarà infine possibile impedire all'utilizzatore di attivare una scala differente da quella impostata dallo sviluppatore con una semplice istruzione che imposta su "no" la proprietà "user scalable":
Per risolvere questa problematica è possibile tener conto di alcuni accorgimenti come per esempio quello di settare la larghezza delle pagine sulla base di quella dell'area di visualizzazione di un dispositivo; questo risultato potrà essere ottenuto inserendo all'interno dei tag "head" (intestazioni di pagina) la seguente istruzione:
<meta name = "viewport" content = "width = device-width">
Nello stesso modo, sarà possibile settare la scala iniziale per lo zoom con un valore predefinito dallo sviluppatore, come nell'esempio seguente in cui essa viene impostata su "1.0"
<meta name = "viewport" content = "initial-scale = 1.0">
Sarà infine possibile impedire all'utilizzatore di attivare una scala differente da quella impostata dallo sviluppatore con una semplice istruzione che imposta su "no" la proprietà "user scalable":
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
Pubblicato in:
HTML
Tutorials Correlati
Putty: un client SSH libero e gratuito
Putty (o più propriamente "PuTTY") è un client SSH che integra anche una sh...
Rilevare dispositivi mobili con MobileESP
Il rilevamento dei dispositivi mobili è ormai una procedura indispensabile ...
Redirect della navigazione a seconda del dispositivo mobile
E' possibile utilizzare un semplice file .htacess per effettuare le red...
Creare link "telefonici" per l'iPhone
Sviluppando pagine Web ottimizzate anche per la visualizzazione su disposit...
Lascia un commento
Categorie
- Apache (9)
- cPanel (2)
- Database (2)
- Drupal (1)
- HTML (3)
- Joomla (1)
- Linux (5)
- PHP (23)
- Sicurezza in Rete (4)
- Web Marketing (2)
- Webdesign e grafica (4)
- WordPress (3)
Archivi
Anno 2011