Le nuove potenzialità delle Media Queries CSS3 ci permettono di fatto di fare a meno di script verbosi per il calcolo delle dimensioni dello schermo del dispositivo e di usare invece un approccio molto più efficace. Nello sviluppo di layout per iPad questa caratteristica si rivela fondamentale. Vediamo perchè.
Dimensioni e orientamento
Lo schermo dell'iPad può essere orientato in due modi:
landscape: larghezza di 1024 pixelportrait: larghezza di 768 pixel
Anche se, in linea di massima, sarebbe possibile evitare del tutto i pixel e usare le percentuali, lasciare al browser il compito di risistemare le dimensioni è sempre un'operazione rischiosa, specie quando anche il codice JavaScript della nostra app si affida a dimensioni precise.
Per questo è meglio specificare dimensioni in pixel per quegli elementi che contengono grafica o oggetti e affidarsi invece alle percentuali per gli elementi che non necessitano di una precisione rigorosa (come gli elementi a contenuto testuale).
Applicare i CSS
Il codice che segue viene applicato in modo predefinito all'orientamento landscape:
#app {
width: 1024px;
margin: 0 auto;
height: 100%;
min-height: 100%;
position: relative;
}
#header {
width: 100%;
height: 160px;
background: url(header.png) no-repeat;
}
Con le Media Queries CSS3 possiamo invece ridimensionare il layout per l'orientamento di tipo portrait:
@media only screen and (orientation:portrait){
#app { width:768px; }
#header {
background-size: contain;
height: 140px;
}
}
Sicuramente noterete che ho usato la proprietà CSS3 background-size per ridimensionare l'immagine di sfondo dell'header.
La parola chiave contain fa scalare l'intera immagine per adattarsi alle nuove dimensioni del contenitore.