Can js/jQuery determine the orientation of the iPhone?
window.orientation will give you an integer that denotes the rotation. You can listen for orientation changes by adding an event to the body:
<body onorientationchange="updateOrientation();">
Just on the off-chance that the link dies or gets moved at some point:
Value | Description
-------+-------------------------------------------------------------------------------
0 | Portrait orientation. This is the default value.
-90 | Landscape orientation with the screen turned clockwise.
90 | Landscape orientation with the screen turned counterclockwise.
180 | Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.
jQuery(window).bind('orientationchange', function(e) {
switch ( window.orientation ) {
case 0:
alert('portrait mode');
break;
case 90:
alert('landscape mode screen turned to the left');
break;
case -90:
alert('landscape mode screen turned to the right');
break;
}
});
edit:
While this is OK for the iPhone it may not work correctly in other devices.
I would like to add some info I found at http://phoboslab.org/log/2012/06/x-type-making-of
And his example is more cross browser/device compatible.
Mobile Safari and Chrome both support the orientationchange event, which makes this easy. However, we can not rely on window.orientation, which reports the rotation in degrees (0, 90, 180 or 270), because some devices report 0° for portrait mode, while others report 0° for landscape. How convenient!
The solution is to just check if the window height is bigger than the width – if so, we're obviously in portrait mode! But as this would be too easy, Chrome's Browser offers another challenge for us: it only updates the window dimensions after it has fired the orientationchange event. So we listen for orientationchange and resize events. Sigh.
var wasPortrait = -1;
var checkOrientation = function() {
var isPortrait = (window.innerHeight > window.innerWidth);
if( isPortrait === wasPortrait ) { return; // Nothing to do here }
wasPortrait = isPortrait;
// Do your stuff...
};
window.addEventListener( 'orientationchange', checkOrientation, false );
window.addEventListener( 'resize', checkOrientation, false );