Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
orientationchange event returns wrong values on Android #793
I'm trying to create a little mobile site and need to adjust a few minor layout things based on the screen orientation. While messing around with the orientationchange function I think I've uncovered a bug on Android devices.
When the orientationchange event fires Android appears to return the wrong orientation. I.e. when the screen is horizontal it returns "portrait" when it should be returning "landscape" and vice-versa.
I tested on an original Motorola Droid and an HTC Incredible and they both behave the same way. A commenter on my jQuery forum post confirms HTC Desire is incorrect as well. iPod/iPhone devices appear to return the proper values without a problem.
I tried using the event value and also checking for the CSS .portrait and .landscape classes and it's the same either way.
I have a demo page you can view online here:
My forum post with code attached is here:
I've seen that issue on a project as well, and found that the event is triggered too early. You can verify that by putting in some rather long timeout, e.g. 500 milliseonds. A workaround would check if the orientation actually changed, and delay triggering the event until it does.
Is this issue linked to a specific Android version? Because the orientationchange event isn't fired at all on the LG GT540 (Android 2.1) - used your demo page. I assumed that jQuery Mobile emulates this event when it is not natively supported?
Should I use the resize-event instead and check the window's height and width by myself for now? Does the resize event fire too early, too?
The 'orientationchange' event does not report the proper value for several devices that we've tested -- the Nexus One, Droid in particular.
These devices seem to trigger an 'orientationchange' event before the window is resized to reflect the new orientation.
The existing orientation handling code will report the exact opposite orientation after the initial 'orientationchange'.
I've submitted a pull request that addresses this issue. The pull fixes this by creating two separate orientation handlers -- one for browsers that natively support orientation and a second that basically uses the current code.
If the browser has native orientation support, then map between device-specific orientation values (in degrees) and a more easily used textual value (i.e. 'portrait', 'landscape'). The mapping is based upon an initial, baseline measure of the window ratio compared to the reported orientation which is performed once the DOM is reported ready and the window size measure can be trusted.
If there is not native orientation support in the browser, fall back to a window ratio measure initiated on window resize.
pushed a commit
Jul 5, 2011
Judging from the comments here and the fact that using the jqm emulation produces the desired result it sounds like everyone expects this to be a post orientationchange event. That is an event that is triggered when the orientation changes and the document element size has been altered. The docs are actually ambiguous as to whether the orientation value will be pre/post change.
There's a case to be made for having an orientation change event that fires before the document element has resized, but for now after I double check with the team I'll look into making the current
 window -> document element
If you guys can test the results on your devices locally with the following it would be brilliant:
git checkout -b orientationchange master git pull https://github.com/johnbender/jquery-mobile.git master # ... test test test ....
This doesn't address the issue of the event firing before the screensize has changed on Android but at least the user will get the correct value from
[update] small change to the commit
Indeed, and for that matter HTC Sensation fires only one orientation change event but too early. The window is wrong size when it fires. HTC Desire in the other hand fires 3 orientation change events. Depending on orientation change or resize event is quite dangerous.
Is it possible for jquerymobile to wrap these platform specific behaviours in some custom event? For example the way that jquery wraps all different ajax implementation in one api.
Yah, I noted that in the message before the commit. The change only gets the user the right value, but because the different browsers fire the event at different times, most importantly after the resize has occurred, we don't have an easy way of making sure the event happens when the screen is the right size. We might address this post 1.0, but not before.
We'll hopefully try and address the quirks here but the combination of the event firing many times per orientation change in conjunction with the poor consistency in timing is going to make it difficult if not impossible. For sure this won't be fixed before 1.0.