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
}
