Mercredi
18/08/10

CSS3 - Adapter une page html à l'aide des Media Queries [3] : orientation

And the winners are...

À la question d'hier sur le comportement d'un smartphone avec un max-device-width fixé sur la largeur de l'écran (largeur du rectangle au sens mathématique du terme), la réponse est bien la C : "ça dépend" (ça dépasse ).

On est content avec ça... Mais ça dépend de quoi ?

Et bien contrairement à ce que pense Emmanuel, ce n'est pas une simple rotation de l'appareil qui va changer la donne, c'est plus subtil.

En effet, si on charge la page en mode portrait, la page sera bien noire puisque nous sommes dans la configuration où la largeur est de 480 pixels. Le fait de tourner le smartphone en mode paysage (donc avec une "largeur" devenant de 800px) ne change rien. Sauf... si on recharge la page en restant dans la même orientation paysage.
Le fond de page passera au blanc, et le restera tant qu'il n'y aura pas de rechargement de la page en mode portrait.

Un <meta name="viewport" content="width=device-width" /> ne change rien à ce comportement.

Tester le résultat max-device-width:480px

Orientation

Pour avoir un véritable changement de comportement entre le mode portrait et le mode paysage, il faudra passer par la propriété orientation.

Code CSS
body {
background-color:white;	
color:black;
}
 
@media only screen and (orientation:landscape) {
 body {
 background-color:black;
 color:white
 }
}

Dans ce cas, il y aura vraiment un changement de couleur de fond lors de la rotation de l'écran. Il passera du blanc, en mode portrait, au noir en mode paysage, et ce bien entendu quelque soit la taille et la résolution de l'écran.

Tester le résultat orientation:lanscape

Et voilà, trois petits jours pour passer en revue trois petites propriétés des media queries. Comme je le disais sur le premier tutoriel, il y a bien d'autres possibilités d'exploitation. Pour cela, n'hésitez pas à consulter les specs du W3C !

Les commentaires des billets de l'année 2010 sont fermés.

| Avant | Archives | Haut de page |