orientationchange does not work in Mobile Firefox for Androids… WTF !

Yes, orientation change does not work in mobile Firefox. Strange!, but it is. So, when you rotate your mobile device from portrait to landscape mode and back to portrait mode, the orientationchange event is not fired in Firefox browsers for Android devices.

Normally for mobile browsers we detect the orientation change happening by registering to the orientationchange event.

window.addEventListener('orientationchange', function() {
  alert('orientation: ' + orientation);
}, true);

where the orientation property of the global object gives the current orientation that the device has been tilted to. For eg. 0 for portrait and 90/-90 for landscape.

However, when you run this code in firefox browsers for Android, the event is not fired (I tested it on Firefox 20/Galaxy S3). And this happens to be a bug. I mean how can you miss such a common thing in a big big browser!!

But there is an alternative way to detect the orientation changes in firefox browsers and that is by using Media Query detection technique. Also to let you know, I used the window.resize event to detect the orientation but it did not give correct results. The Media Query method worked perfectly. Here it is,

var test = window.matchMedia("(orientation: portrait)");
test.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
    alert('portrait');
  }else {
    // Changed to landscape
    alert('landscape');
  }
});

Still the window.orientation property is undefined for firefox browsers. So, you can use that to detect if it actually supports orientation change event. Who knows later they might start supporting. This is how you can do that,

if(typeof window.orientation === 'undefined') {
  //use media query technique
} else {
  //use orientationchange event handler
}
Advertisements

How to detect the orientation of device at page load – iPhone

This is one situation which baffles me sometimes and I face this one regularly while developing mobile web apps – I want to know whether the device is held in portrait or landscape mode when the page first loads and then based on the result I change the look n feel. Remember landscape mode of the device is more wider and the screen width increases, so does the viewport width so you have to adjust your page layout accordingly.

Continue reading “How to detect the orientation of device at page load – iPhone”

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 – https://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.