CSS: usare le Media Queries nei layout per iPad

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:

1. landscape: larghezza di 1024 pixel
2. portrait: 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.