Area di visualizzazione browser di iphone e ipod touch

Area di visualizzazione browser di iphone e ipod touch

In questo articolo riassumeremo gli elementi fondamentali da implementare quando si sviluppano pagine web che devono essere fruite da un Iphone o un Ipd Touch e a breve anche ipad.

1.1 Safari Mobile: il Browser dell’iphone, Ipod touch e ipad

Il browser utilizzato da Apple in ogni iphone, ipod touch e ipad e’ Safari Mobile (basato su WebKit).

Safari Mobile supporta linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (in parte), JavaScript 1.4, supporto del Dom e Ajax; la possibilit di visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel), immagini Gif, Jpeg, Png e Tiff.

Inoltre e’ possibile riprodurre filmati QuickTime e file MP3 direttamente dalle pagine Web.

Attualmente non vi e’ compatibilita’ con le tecnologie Adobe Flash o Java.

1.2 L’area di visualizzazione (Viewport): 320 x 480 px dimensioni dello schermo dell’iphone

La viewport e’ l’area di un dispositivo destinata a presentare i dati e ad offrire l’interazione con l’utente i cui non sono fissi: l’utente puo’ eseguire uno zoom di un elemento di una particolare area per fruire meglio del contenuto pubblicato.

Lo schermo dell’iPhone ha una risoluzione di 320×480 pixel.
Per visualizzare una pagina web occorre tener presente che 20 pixel sono occupati dalla barra di stato e 44 px dalla barra dei pulsanti.

Quindi la viewport per i contenuti e’di 320x356px; considerando la barra dell’indirizzo, l’unica che si puo’ nascondere utilizzando codice HTML, quest’area cresce a 320x416px.
Posizione orizzontale:

L’iphone e l’ipod touch possono essere ruotati in posizione orizzontale, in tal caso la risoluzione per i contenuti si riduce a 209 x 480px (269 x 480 senza barra degli indirizzi).

Pertanto il browser Safari Mobile di iPhone e Ipod Touch e’ composto da alcuni elementi come la barra di stato di 20 px (status bar) e di indirizzo che misura 60 pixel, e l’area inferiore dei pulsanti standard che e’ di 44 pixel. Dobbiamo tener presente che le dimensioni di visibilita’ del browser iPhone (senza lo scrolling della pagina) sono di 320 x 356 pixels.

1.2.1 Riassumiamo:
Visualizzazione in Verticale:
480 x 320 px – Dimensione Schermo
416 x 320 px – Dimensione utile dello scrolling data la presenza dei pulsanti e della barra di stato
356 x 320 px – Dimensione utile prima dello scrolling , comprende la barra di stato di safari.
Visualizzazione in Orizzontale:
209 x 480 px – Dimensione utile data la presenza della barra degli indirizzi
269 x 480 px – Dimensione utile dello scrolling senza barra degli indirizzi

Area di visualizzazione browser di iphone e ipod touch

Area di visualizzazione browser di iphone e ipod touch