Css sélectifs
Lier la page à une feuille de style spécifique à l'iPod/iTouch
<link media="only screen and (max-device-width: 480px)"
href="iphone.css?201208241130" type="text/css" rel="stylesheet">
Lier la page à une feuille de style pour tout autre navigateur que l'iPhone/iTouch
<link media="screen and (min-device-width: 481px)"
href="standard.css?201208241130" type="text/css" rel="stylesheet">
CSS spécifique à l'orientation
Il est très souvent utile de connaître l'orientation de l'écran pour en adapter le style. Joe Hewitt proposait une petite fonction intéressante qui permet d'appliquer un nouvel attribut orient="portrait" (portrait) ou orient="landscape" (paysage) au tag Body
En voici ma version en utilisant l'événement onorientationchange.
body[orient="portrait"] {
background:#FF0000;
}
body[orient="landscape"] {
background:#000;
}
function updateOrientation() {
switch(window.orientation) {
case 0:
orient = "portrait";
break;
case -90:
orient = "landscape";
break;
case 90:
orient = "landscape";
break;
case 180:
orient = "portrait";
break;
}
document.body.setAttribute("orient", orient);
}
<body onorientationchange="updateOrientation();">
