Creare un sito web ottimizzato per Iphone e Ipad usando CSS3
Quando si crea  un sito web, deve essere testato  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 dispositivi mobili  è sempre necessario sviluppare alcuni CSS ottimizzati per fare in modo che tutto venga visualizzato perfettamente.
Creare un 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]-->
er far si che funzioni, si deve editare il path di ogni stylesheet, quindi aggiungere i fogli di stile per iPhone (primo
) o iPad (secondo
).
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.
Related posts:
Libri e manuali di: Web Design
Qualcosa di interessante per te
 |
Libri e Manuali di : Web Design
Articoli Recenti
-
Modernizr. Questa librerira fa un test della presenza di oltre 20 features HTML5/CSS3, restituendo un oggetto JavaScript e una [...]gen 27, 11 pm
-
Google SERP Snippet Optimization Tool, è un tool che ci aiuterà a visualizzare  l'anteprima della Meta description del nostro [...]dic 09, 09 am
-
Questa volta voglio condividere con voi un sito che ci aiuterà molto nello sviluppo del nostro codice CSS per i nostri siti [...]nov 28, 03 pm
Twitter Updates