Christian Castelli
a- a+

Adattare il sito attuale ad iPhone, senza creare una versione dedicata con contenuti duplicati grazie ai Media dei CSS

Adattare un sito preesistente per l'iPhone attraverso la proprietà media dei CSS

Per migliorare l'esperienza di navigazione degli utenti che visitano il vostro sito attraverso l'iPhone, è necessario valutare come appariranno i contenuti sul suo display, in modo tale da indetificare le aree nelle quali sia possibile ottimizzare i contenuti.

Ad esempio, aumentando la grandezza del font e disponendo i contenuti in blocchi propriamente formattati, aumenterà l'usabilità del vostro sito. Infatti è possibile mostrare una versione del vostro sito dedicata all'iPhone senza il bisogno di mantenere copie separate dei contenuti. Ciò è possibile attraverso l'uso di fogli di stile esterni per stilizzare il sito web per gli utilizzatori dell'iPhone.

Media Query

In quest'articolo vedremo come identificare l'iPhone per mezzo di una media query CSS, così come raccomanda la stessa Apple.

Passo 1: Aggiungete il seguente codice nell'header della pagina HTML:

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

Questo codice istruirà il browser ad usare questo foglio di stile per i dispositivi che dispongono di una larghezza massima di 480px. I browser che non supportano questa proprietà la ignoreranno semplicemente. Il commento condizionale viene usato per salvaguardare possibili inconsistenze con la resa di IE6/7.

Passo 2:Creare lo stile
A questo punto creiamo il CSS e definiamo una semplice classe, foo, con i seguenti attributi:

.foo{  color:#ff0000;  font-size:18px;  font-family: Arial;  }

Passo 3: Fare riferimento alla classe creata nel contenuto della pagina:

<div class="foo">  Esempi odi contenuto stilizzato per iPhone e iPod touch.  Questo testo verrà mostrato colorato di rosso e con font   18pt Arial per l'iPhone e senza alcun stile applicato per  gli altri visitatori.</div>

Fonte: iPhone Microsites;



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti
Anonimo
Ciao Pier Paolo e grazie per la dritta... tuttavia volevo chiederti un ulteriore aiuto:
se, anziché caricare una nuovo foglio di stile, volessi caricare una nuova pagina, cosa mi consigli di fare???

A presto, grazie, Kalesh