JavaScript: How to detect orientation change of a mobile web app

Update:
1) For Firefox browsers on Android mobile devices, the orientation change event is not fired. See how to have an alternate detection mechanism for mobile firefox – http://jbkflex.wordpress.com/2013/05/23/orientationchange-does-not-work-in-mobile-firefox-for-androids-wtf/

Now back to the original post,

orientation changeIf  you have worked on a mobile web application using Sencha Touch, you might not have come across this problem of detecting the orientation change (portrait to landscape and landscape to portrait) of the mobile device, as Sencha Touch detects it for you (you do not have to write any extra code for it). However, when you are developing a mobile web app purely with HTML5, JavaScript and CSS/CSS3 which I did (without using Sencha Touch) then it becomes highly important for you to detect the orientation mode of the device and change the UI accordingly. JavaScript now allows us to detect the orientation mode of the device be it a iPhone, Android or a BlackBerry device. You can detect whether your viewing mode is portrait or landscape. Here is how to do it,

window.addEventListener('orientationchange', handleOrientation, false);
function handleOrientation() {
if (orientation == 0) {
  //portraitMode, do your stuff here
}
else if (orientation == 90) {
  //landscapeMode
}
else if (orientation == -90) {
  //landscapeMode
}
else if (orientation == 180) {
  //portraitMode
}
else {
}
}

As you can see we have used W3C’s DOM Level2 event registration method of addEventListener() to handle the orientationchange event. Now, as you change the orientation of the device the method  handleOrientation() will be called. Inside the handleOrientation() method we have a series of if-else blocks to handle the correct mode and make the UI changes accordingly. Note that the orientation variable gives the current orientation value. It is a pre-built variable, so no need to declare it.

There is another method of making the necessary UI changes for your mobile web app based on the orientation – using CSS3 Media Queries. However, I prefer the java script way as I had to do a lot of DOM manipulation and changes in my project which cannot be done using CSS.

Also I have used percentage widths of elements in CSS to make them auto adjust to the screen size of the device. So, this way also sometime solves the problems. Will write a small post on it soon.

About these ads

8 thoughts on “JavaScript: How to detect orientation change of a mobile web app

  1. Pingback: How to detect the orientation of device at page load – iPhone « Joseph's RIA Lab

    • Write the addEventListener inside the body load or window load, whichever you prefer. And write the handleOrientation function outside, i.e as a separate function

  2. Pingback: User.Identity and associated attributes - how can we slight them in a unparalleled slight that can be called by any of my controllers? -

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s