Can js/jQuery determine the orientation of the iPhone?
Out of curiosity I've been playing with jQuery to determine the browser's screen size, and it occurred to me that screen size could be used to determine whether or not a visitor was using an iPhone/iTouch to view the site.
So I used the following to test this:
$(document).ready(
function() {
var screenX = screen.width,
screenY = screen.height;
alert("X: " + screenX + " Y: " + screenY);
if (screenX == 320 && screenY == 396) {
$('div#wrap').css('background-color','#f00');
}
else if (screenY == 320 && screenX == 396) {
$('div#wrap').css('background-color','#0f0');
}
}
);
On viewing the page via iPhone, I notice that the dimensions are consistently (regardless of orientation):
x: 320, y: 396
This is regardless of orientation. I haven't, as yet, attempted to use an onChange event to detect changes (mainly because I'm still so new at jQuery), but I wondered if there was a way to determine, via jQuery or plain javascript, the iPhone/iTouch's orientation?
Answer
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.