HTML and CSS Reference
In-Depth Information
As you can see, CSS rules can include media queries specifically inside the CSS style sheet. To learn more about
other media queries you can target in addition to orientation, see
http://w3.org/TR/css3-mediaqueries
.
■
at the time of writing, the orientation property in media queries did not work on apple's iphone and some other
phone devices.
Note
Still the best technique ,in my opinion, is to know the screen dimensions of the devices you're serving for and
cater to each using CSS media queries and the
orientationchange
event in JavaScript. Listing 8-15 shows how to
detect the change event.
Listing 8-15.
Orientation Example (JavaScript)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
<script>
window.addEventListener("orientationchange", function() {
if (window.orientation === 0 || window.orientation === 180) {
//portrait
showPortrait();
} else {
//landscape
showLandscape();
}
}, false);
function showPortrait () {
document.body.style.backgroundColor = 'yellow';
}
function showLandscape () {
document.body.style.backgroundColor = 'black';
}
</script>
</html>
