La diffusione dei tablet è in grande crescita e l'iPad in particolare è il più popolare tra questi dispositivi. In questo articolo vedremo come assegnare degli stili specifici per le due modalità di orientamento dell'iPad.
Landscape e portrait
Per modalità di orientamento si intende il modo con cui viene tenuto l'iPad durante l'uso. Le modalità di orientamento sono due: orizzontale e verticale.
La prima modalità ha ovviamente una risoluzione di schermo maggiore della seconda. Nei layout con i CSS per iPad è spesso fondamentale stabilire con precisione le dimensioni e le proporzioni degli elementi. Anche se il browser Safari Mobile è perfettamente in grado di effettuare un ridimensionamento di un layout non adattato per iPad, è altrettanto vero che affidarsi unicamente ai suoi algoritmi non è sempre la soluzione ideale.
L'utente può in tal senso zoomare gli elementi o la pagina stessa, ma il rendering a quel punto sfugge al nostro controllo se non abbiamo fissato con precisione dei limiti alle dimensioni degli elementi.
L'iPad, come l'iPhone, dispone di due modalità di orientamento: landscape e portrait. Ruotando il dispositivo si passa da una modalità all'altra. Landscape indica la modalità con larghezza a 1024 pixel, mentre portrait quella con larghezza a 768 pixel. La cosa interessante a livello di rendering (propria di questi dispositivi) è che non solo si ha un reflow degli elementi ma anche un cambio del livello di zoom ad ogni rotazione del dispositivo.
I CSS3 ci permettono di assegnare stili specifici per le due modalità utilizzando le Media Queries. Vediamone i dettagli.
Sintassi e uso
La sintassi di base per le due modalità è la seguente:
@media only screen and (orientation:portrait) {
/* stili per il portrait */
}
@media only screen and (orientation:landscape) {
/* stili per il landscape */
}Non è necessario specificare sempre le due sintassi insieme. Quello che è importante invece è essere sicuri di sovrascrivere gli stili già usati. Ad esempio:
#app { width: 1024px; }
@media only screen and (orientation:portrait) {
#app { width: 768px;}
}Questi stili possono anche riguardare aspetti dinamici dei CSS, come ad esempio le animazioni:
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0); opacity: 1;}
10% {-webkit-transform: scale(1);opacity: 0.5;}
50% {-webkit-transform: scale(1.75);opacity: 0.8;}
100% {-webkit-transform: scale(1); opacity: 1;}
}
.animate {
-webkit-animation: pulse 3s ease-in-out;
}
@media only screen and (orientation:portrait) {
.animate {
-webkit-animation: pulse 1s ease-in-out;
}
}In questo caso abbiamo modificato i tempi dell'animazione per renderla più veloce in modalità portrait.
Un altro esempio può essere quello di una linearizzazione forzata di alcuni elementi del layout qualora ci accorgessimo che in una modalità avvengono delle sovrapposizioni di elementi:
@media only screen and (orientation:portrait) {
#navigation li {
float: none; /* altrimenti le voci del menu si sovrapporrebbero andando su una nuova riga */
}
}Altro esempio è la gestione di immagini ed elementi multimediali:
div.media img, div.media video {
display: block;
max-width: 1024px;
}
@media only screen and (orientation:portrait) {
div.media img, div.media video {
display: block;
max-width: 768px;
}
}In questo modo ci assicuriamo che gli elementi multimediali siano sempre visibili nella finestra del browser ma senza forzare quest'ultimo ad effettuarne il ridimensionamento.
