Siti web per iPhone: i css e il layout che ruota

Complichiamo il CSS

Il seguente foglio di stile controlla quali contenitori sono correntemente mostrati a video e quali sono nascosti, i quali verranno gestiti lato javascript.

/*---   ORIENTATION CLEVERNESS  --*/  #content_left,  #content_right,  #content_normal,  #content_flipped  {    display:none;   } 

Prima di tutto dobbiamo nascondere qualsiasi cosa, di modo che quando la pagina verrà caricata, non verrà mostrato del contenuto inappropriato.

.show_normal,  .show_flipped{   width:320px;    }  .show_left,  .show_right{    width:480px;    } 

Poi specifichiamo la larghezza dei contenitori. Se state sviluppando un sito che rientra perfettamente nelle dimensioni del display dell'iPhone, potreste voler specificare anche le altezze in questa parte.

.show_left #content_left,  .show_right #content_right,.show_normal #content_normal,  .show_flipped #content_flipped{    display:block;} 

Infine mostriamo i contenitori se #page_wrapper ha la classe corretta. Queste classi verranno usate via javascript.

Il tocco finale: rilevamento dell'orientamento del dispositivo

Il codice seguente trova la sua compiutezza tranedo spunto da vari script nel web.

window.onload = function initialLoad(){     updateOrientation(); } 

La prima linea di codice inizializza il cambiamento dell'orientamento, senza il quale quest'ultimo non sarebbe rilevato al caricamento della pagina, ma solo alla prima modifica.

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
        contentType += "normal"; break;
        case -90:
        contentType += "right";  break;       
    case 90:
        contentType += "left";   break;           
       case 180:  
        contentType += "flipped";  break;
    }
  document.getElementById("page_wrapper").setAttribute("class" , contentType);
 } 

 

<a href="/img/23/sitoiPhone_iframe4.html" title= "Vedi esempio">Vedi codice</a>;

 

Questa è la funzione che effettua i cambiamenti alla pagina permettendo di mostrare contenuti differenti. Vediamola nel dettaglio:

  • dopo aver dichiarato il nome della funzione e una variabile che mantiene lo stato, controlliamo l'orientamento tramite uno switch fintanto che non troviamo il caso corretto, appendendo alla stringa contentType il termine rilevante.
  • Infine lo script identifica il div page_wrapper dal suo id e setta il valore della classe con quello della variabile contentType. Da qui in poi ci pensa il foglio di stile alla resa grafica della pagina.

C'è anche un piccolo trucco per trarre il massimo dalle dimensioni del display dell'iPhone.

window.addEventListener("load" , function() {
                setTimeout(loaded, 100)
 }, false);

function loaded() {
    document.getElementById("page_wrapper").style.visibility = "visible";
    window.scrollTo(0, 1); // pan to the bottom, hides the location bar 
} 

    
<pre name="code">
    <a href="/img/23/sitoiPhone_iframe5.html" title=
"Vedi esempio">Vedi codice</a>;
</pre>
    
    

Il codice attende fintanto che la pagina non viene caricata e poi effettua uno scrolling fino all'elemento richiamato (in questo caso, page_wrapper). Questo nasconde la barra degli indirizzi piuttosto che costringere ll'utente ad effettuare uno scrolling manuale. Molto comodo se si vuole che la pagina calzi a pennello per le dimensioni dell'iPhone.

I sorgenti a vostra disposizione

Potete provare quanto esposto in quest'articolo visitando la pagina www.engageinteractive.co.uk/tutorials/iphone/ con il vostro iPhone.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti
roberto
Grazie per il tutorial e complimenti ma ho un dubbio. Anche visionando direttamente l'esempio proposto sul sito
www.engageinteractive.co.uk, balza all'occhio un particolare. Ruotando il telefono (iphone in questo caso) il contenuto del corpo si ingrandisce costringendo al doppio tap per adattare il display. E' normale? Si può forzare in maniera che si adatti sempre perfettamente alle dimensioni del display?
Ciao