Corsi on-line

Scrivere CSS per iPad

In attesa di mettere mano ad una delle tavolette delle meraviglie di Cupertino, è già possibile adattare le proprie pagine Web per la visualizzazione tramite il browser (Safari) dell’iPad; Una delle caratteristiche della navigazione su iPad è (esattamente come per l’iPhone) la possibilità di ruotare il dispositivo variando la modalità di visualizzazione dei contenuti sullo schermo (verticale/orizzontale).
Sulla base di questa caratteristica è possibile, quindi, definire due diversi fogli di stile CSS per le nostre pagine web variando, di fatto, il layout della pagina a seconda che la visualizzazione sia verticale (portrait) o orizzontale (landscape).

<link rel="stylesheet" media="all and (orientation:portrait)" href="verticale.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="orizzontale.css">

Ai fini del nostro esempio supponiamo che i due fogli di stile si differenzino unicamente circa la stilizzazione del tag <h1> che, all’interno della pagina, sarà presente due volte con due diversi ID (corrispondenti, appunto, alle due diverse modalità di visualizzazione):

<h1 id="portrait">Stai guardando in modlaità Verticale</h1>
<h1 id="landscape">Stai guardando in modlaità Orizzontale</h1>

Nel primo foglio di stile (verticale.css) verrà inserita questa stilizazione:

#landscape {display:none}

che nasconde l’H1 stilizzato per la modalità landscape.
Allo stesso modo, all’interno del  secondo foglio di stile (orizzontale.css) avremo:

#portrait {display:none}

ottenendo il risultato opposto.

E’ possibile testare questo semplice trucchetto anche sulla versione per PC di Safari, semplicemente variando la risoluzione dello schermo (nel primo caso l’altezza deve essere superiore della larghezza, nel secondo caso viceversa).

Post correlati
  • Non usare display: none perché non viene letto dai dispositivi vocali.
    Meglio metterlo fuori schermo con il posizionamento assoluto e poi dargli un margine sinistro fortemente negativco, che so margin-left: -99999em

    M.

  • Massimiliano Bossi

    Giusta osservazione.

  • Rilancio con un’altra alternativa valida, text-indent:

    .selettore {
    text-indent: -9999px;
    }

  • Anonimo

    e se inserissi il tag media?

  • Fammi un esempio

I più letti del mese
Tematiche