Settare lo zoom predefinito in un sito per l'iPhone

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:

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