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?
I tried a similar approach for tablets cross-platform using .height() and .width() and then comparing which is larger. It works in iOS5 (tested on Ipad2) and the BlackBerry Rim but appearently not on Android (3.2 and 4.0.3). On Android the first time loading the site it gives me the right height and width but then changing the screen orientation it is always one step behind.
Ex. using the dimensions 800x1200 starting in portrait mode:
h:1200 w: 800 (portrait)
h:1200 w: 800 (landscape)
h:800 w: 1200 (portrait)
h: 1200 w: 800 (landscape)
Looking on I tripped over this solution with CSS3:
How to use javascript conditionally like CSS3 media queries, orientation?
This is probably better than tweaking the Js solution.
See "Handling Orientation Events" of https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
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 PHONES / TABLETS ONLY
This only work for phones and tablets! Basic orientation (case 0) differs between tablets. Samsung case 0 is landscape, iPad case 0 is portrait.
window.orientation will give you an integer that denotes the rotation. You can listen for orientation changes by adding an event to the body:
Edited by OP, just on the off-chance that the link dies or gets moved at some point...