These days I’m working on a mobile site discovering how hard is to address all the mobile device behaviors, screen sizes, viewports and so on. One problem is to detect withing a browser the orientation to adapt the content or generally the user experience.
You many know there are the “media queries” to create different CSS for different orientations (portrait/vertical or landscape/horizontal), but they are only CSS changes not event so you can take actions on orientation change.
To detect the orientation and orientation change we can use the “window.orientation” value that report the orientation in degrees (0, 90, -90, 180). More, we can “listen” t the event “orientationchange” to be notified when the device is rotated.
I coded the simplest possibile example to detect and display the mobile device orientation, you can test it at the address:
http://www.satollo.net/mobile/orientation1.php
That page will show the orientation value (in degree) and that value should change when you rotate your phone or tablet. For example the Apple Ipad 1 I’m using, shows the values 0, 90, -90, 180, while the Samsung Galaxy S (not Galaxy S II) show only 0, 90, -90 and if you rotate it upside down you cannot detect that position. Damn it!
Using jQuery Mobile
I tried, since available, jQuery Mobile to detect and manage the orientation, but I faced a strange problem where the reported orientation, after shacking a bit the phone, started to be reversed (portrait for landscape and vice versa).
The where I experimented with jQuery was full of javascript and with a complex DOM, so what I found is probably not a bug but due to that dirty page code.
