Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
183 views
in Technique[技术] by (71.8m points)

javascript - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

56.9k users

...