iPhone web browsers
iPhone Web Browser

1.0 La visualizzazione di una pagina web con l’iphone (viewport):
Quando, utilizzando safari, l’iPhone carica una pagina Web esegue uno scaling, viene ridotta la risoluzione della pagina per farla visualizzare sul display.
Il funzionamento dello scaling avviene poiche’ l’iPhone controlla la larghezza della pagina ad una risoluzione, considerata la piu’ comune, di 980 pixel per poi scalarla, in un secondo passaggio, alla risoluzione di 320 pixel (se il telefono e’ in posizione verticale) o 480 pixel (se e’ in orizzontale).Pertanto per quei siti la cui risoluzione e’ meno di 980 pixel (in larghezza) verra’ mostrato uno spazio bianco ai lati che rendera’ meno leggibile il testo pubblicato.

Per evitare problemi di visualizzazione e’ necessario aggiungere un “meta tag” che imposti la viewport dell’iPhone alla larghezza della pagina.
Nel caso di una pagina web con una larghezza di 700 pixel quindi il nostro viewport dovra’ essere di 700 pixel:

< meta name=”viewport” content=”width=700″ />

Sara’ anche possibile bloccare il minimo (minimum-scale), il massimo (maximum-scale) zoom possibile sulla pagina e settare uno zoom¬† predefinito iniziale (initial-scale).

< meta name=”viewport” content=”initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8″ />

I valori che impostano lo scaling vanno calcolati in relazione alla dimensione in pixel della pagina che altrimenti e’ preimpostata a 980 pixel: 0.6 corrisponde cosi’ a 588 (588 = 980 x 0.6).

2.0 Il doppio Tap , come funziona l’auto zoom (gesture)
Come e’ noto, si puo’ eseguire uno zoom toccando velocemente due volte sull’elemento che si vuole ingrandire (doppio-tap).

Il disegnatore del sito deve progettare un design che renda questa azione piu’ efficace possibile. Quando si esegue un doppio-tap su un oggetto, l’iPhone puo’ eseguire due azioni: se l’elemento in questione e’ un’immagine questa verra’ automaticamente ingrandita e centrata nello schermo; se invece si fa il doppio Tap su una porzione di testo l’iphone verifichera’ in quale blocco e’ inclusa, quindi espandera’ e centrera’ il blocco a tutto schermo.

Tre regole importanti:
1) Strutturare sempre la pagina in diversi blocchi di contenuto in modo da consentire un piu’ facile ingrandimento della porzione che interessa al’utente.
2) Evitare di disegnare un layout con delle colonne troppo larghe.
3) Assolutamente da evitare un layout senza colonne.

In questi ultimi casi se si esegue uno doppio-tap sulla pagina web l’iPhone non riuscira’ ad impostare la grandezza del blocco, non eseguira’ lo zoom e lascera’ il contenuto non del tutto leggibile poiche’ un layout ad una colonna rende impossibile eseguire uno zoom sui contenuti della pagina.