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?