Nessun commento
Pubblicato il 03-novembre-10
Da Fabri

Creazione di un sito web ottimizzato per Iphone e Ipad con CSS3 Media Queries

Quando creo un sito web, lo testo sempre su tutti i browser, piattaforme e dispositivi possibili.
In questo periodo, è un passo importante nella fase di creazione, ottimizzare i siti web per Ipad e Iphone.
Specialmente su iPad, i siti tendono ad apparire un 20% più belli rispetto ai normali browser, quindi è importante prendersi il tempo necessario per ottimizzarlo in ogni dettaglio.
Così quando si sviluppa un sito web ottimizzato per gli iDevices è sempre necessario sviluppare alcuni CSS ottimizzati per fare in modo che tutto venga visualizzato perfettamente.

Creare sito web per iPad & iPhone con differenti file CSS

Se si vogliono applicare gli stili per Ipad e Iphone usando stylesheets esterni, bisogna mettere questo codice nell’<head>:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" />
<!--<![endif]-->

Per far si che funzioni, si deve editare il path di ogni stylesheet, quindi aggiungere i fogli di stile per iPhone (primo <link>) o iPad (secondo <link>).

Come funzionano le due istruzioni? Bene, per prima cosa viene escluso IE attraverso un semplice commento condizionale.
Dopodiché vengono usate alcune CSS3 media queries specifiche per ogni singolo device.
Safari su iPhone corrisponde a  max-device-width di 480px, e Safari si iPad funziona al meglio quando sia min-device-width che max-device-width sono usate nella query.
Insieme, queste media queries applicano gli stili sia quando il dispositivo è orientato in modalità portrait che in versione landscape.

Ottimizzare sito web per iPad & iPhone usando il CSS esistente

Usare gli stylesheets esterni per creare un sito web per gli iDevices funziona eccellentemente, ma un’ennesima  HTTP request può ridurre le performance del sito web. Per evitarlo, si possono applicare queries specifiche per iPhone e iPad utilizzando il foglio di stile esistente. Esattamente lo stesso CSS che si usa con Firefox, Opera ed altri desktop browsers.
Dopo diverse sperimentazioni e test,  ecco ciò che funziona:


/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 .selector-01 { margin: 10px; }
 .selector-02 { margin: 10px; }
 .selector-03 { margin: 10px; }
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
 .selector-01 { margin: 10px; }
 .selector-02 { margin: 10px; }
 .selector-03 { margin: 10px; }
}

Basta semplicemente inserire il codice nello stylesheet esistente e cambiare le classi in qualcosa di più utile ;)

Sfortunatametne combinando le due media queries non funziona:


/* == iPad/iPhone [portrait + landscape] == */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
@media only screen and (max-device-width: 480px) {
 .selector-01 { margin: 10px; }
 .selector-02 { margin: 10px; }
 .selector-03 { margin: 10px; }
}

E voi? Avete già ottimizzato il vostro sito web per iPad o iPhone?
Scrivete il vostro link e opinioni, nei commenti.

Twit this Delicious
Categorie: iPad | iPhone | Mobile devices | Web design

 

Potrebbe interessarti:

Lascia un commento

(richiesto)
(richiesto - non sarà publicato)