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.

Read More »

Using percentage widths: auto adjust contents in a mobile web app

In my last post I talked about how to detect orientation change for a mobile web app using java script. Once you are able to detect the mode of view (portrait or landscape) you can write specific code to change the UI elements accordingly. Well, in this post I will discuss another technique to auto adjust the contents of the mobile web page as per the current orientation. Though this is not as powerful as the java script method or the CSS3 Media Query way, but still it is effective. Before staring, check out the demo application http://jbk404.site50.net/html5/mobile/percentwidth/  in your web browser and try to resize it, you will notice that the contents always auto fits to the screen width size. So, similarly it will also auto fit the mobile device’s screen width when viewed in different modes. Try opening the same URL in your smartphone.

Using percentage widhts
You might have used percent widths for your <div> element when you have declared the style in CSS. This is the same easy method that you can use to auto fit the page elements when viewed in either portrait or landscape mode in a mobile. The main goal is to auto fit the page contents with the correct amount of padding and alignment in both portrait and landscape mode. Below we have an image of a mobile web app page. You can see that the header and the contents occupy the entire screen width. Also I have a small padding applied to the content in the yellow background area. This is the portrait mode, for iPhones and iPods the dimension is 320 x 480 pixels. So the width is 320 px.

Read More »

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.