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 .
at the time of writing, the orientation property in media queries did not work on apple's iphone and some other
phone devices.
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)
window.addEventListener("orientationchange", function() {
if (window.orientation === 0 || window.orientation === 180) {
} else {
}, false);
function showPortrait () { = 'yellow';
function showLandscape () { = 'black';
Search WWH ::

Custom Search