Detecting device orientation changes in web pages
Q: How can I detect device orientation changes in a web page?
A: You can detect whether a device is being held in portrait or landscape orientation with CSS media queries. And, since these queries are re-evaluated when the device orientation changes, you can also use them to dynamically change the page's CSS when a device is rotated.
In addition Safari on iOS emits the orientationchange event when the device orientation changes, and supplies window.orientation to report the current device orientation.
Let's start by looking at a simple example of CSS media queries in action. If the user is holding their device in portrait orientation, the box on this web page will be purple when the page is loaded and change color to green when the device is rotated to landscape:
#box { background-color: purple; } @media all and (orientation: landscape) { #box { background-color: green; } }
You can even animate this color change, so that it happens gradually over time, instead of instantaneously:
/* Mind your prefixes! For example, this would be -webkit-transition in a WebKit-based browser */ transition: background-color 500ms ease-in;
If you have CSS styles that are specific to portrait orientation, there's a query for that too:
@media all and (orienation: portrait) { /* your portrait-specific CSS here */ }
The code snippet above is just simple example that changes background-color on an element, but you can imagine how useful these media queries are if you're trying to create a layout that looks great in both portrait and landscape orientations. You could even combine orientation and device-width expressions, in order to tailor your layouts to specific orientations on specific screen sizes.
As mentioned, Safari on iOS emits the orientationchange event when the device orientation changes, plus you can query window.orientation to determine the current orientation of a device. For example:
<body onorientationchange="updateNote();"> ... function updateNote() { var note = ""; switch(window.orientation) { case 0: note = "Portrait"; break; case -90: note = "Landscape Right\n(screen turned clockwise)"; break; case 90: note = "Landscape Left\n(screen turned counterclockwise)"; break; case 180: note = "Portrait Upside-down "; break; } var message = document.querySelector('#note').innerText = note; }
Note that not all devices support portrait upside-down. Try out this example on your iPhone or iPad to see all of the above code in action. Enjoy!
Disclaimer: I've only tested on iPhone and iPad, as I don't own an Android device!
More info:
MDN guide to CSS media queries
For more detailed information about a device's orientation and movement, check out the deviceOrientation and deviceMotion APIs (also documented on MDN).
Tweet
// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]>