21

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?

David Thomas
  • 249,100
  • 51
  • 377
  • 410

5 Answers5

45

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.
Cœur
  • 37,241
  • 25
  • 195
  • 267
typeoneerror
  • 55,990
  • 32
  • 132
  • 223
  • (Oh, and I hope you don't mind, but I edited your post just to bring the relevant parts of the document inline.) – David Thomas Feb 24 '10 at 02:58
  • Don't mind at all! That's kinda the point of the site ;) Can I ask what you're doing with this type of function? A mobile view of something existing or something brand new? Just curious. – typeoneerror Feb 24 '10 at 02:59
  • At the minute I'm just playing with the possibilities (giggling to myself as the alerts update... =p), but I figure that the consistency of the `x` and `y` (coupled with the presence of `window.orientation`) gives a pretty good indication that the viewer is using an iPhone/iPod Touch. So I think it'll be useful, but I've got no use-case for it, yet. Still, it's a *nice-to-have*, I think... =) – David Thomas Feb 24 '10 at 03:07
  • Seems like this is the wrong place to put user agent detection, you should detect on the server side and serve appropriate content – Michael Mullany Feb 24 '10 at 03:44
  • Does window.orientation change to reflect the user turning their device? I would test it myself, but lack an iPhone and turning my laptop on it's side isn't working . – ehdv Feb 25 '10 at 19:06
  • @ehdv it does, you just have to listen to orientation change events with "onorientationchange" – typeoneerror Feb 25 '10 at 20:02
  • @Michael Mullany, I agree that this would be the wrong place for browser detection, but I can see a use for it, perhaps, serving to adapt the layout subtly, for small client-side tweaks maybe. It might be useful, knowledge is generally a good thing. – David Thomas Feb 25 '10 at 22:10
  • If you use window.orientation, you should not that some (mostly android) devices have the value "0" for "landscape" mode. Also, so far as I can tell it is impossible to tell what your given device is going to do. You can also try to compare window width to height, but this also has issues. – 1800 INFORMATION Sep 30 '14 at 03:43
22
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 );
Pawel Dubiel
  • 18,665
  • 3
  • 40
  • 58
  • 1
    Comparing width to height is problematic for a number of reasons: 1. innerHeight/Width are 0 on some devices for some "undefined" amount of time at startup 2. on some devices innerHeight/Width are set to some odd value like 720 (equal width and height) 3. some devices change the width and height when the keyboard pops 4. the width/height do not always change before the orientation change event fires. I haven't got a good solution for any of this unfortunately, we are just struggling with it ourselves – 1800 INFORMATION Sep 30 '14 at 03:46
3

See "Handling Orientation Events" of https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

Cœur
  • 37,241
  • 25
  • 195
  • 267
Randal Schwartz
  • 39,428
  • 4
  • 43
  • 70
2

Mobile PHONES / TABLETS ONLY

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;

}

This only work for phones and tablets! Basic orientation (case 0) differs between tablets. Samsung case 0 is landscape, iPad case 0 is portrait.

DATEx2
  • 3,585
  • 1
  • 24
  • 26
Paulius
  • 99
  • 1
  • 7
1

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.

Community
  • 1
  • 1
ABBDVD
  • 11
  • 1