代码之家 › 专栏 › 技术社区 › David Thomas

js/jQuery能否确定iPhone的方向?

ipod-touch iphone jquery javascript

19

David Thomas · 技术社区 · 15 年前

因此,我使用以下方法来测试这一点:

$(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');
        }
    }
);

x:320,y:396

这与方向无关。到目前为止,我还没有尝试使用 onChange 事件来检测更改(主要是因为我对jQuery还很陌生),但我想知道是否有办法通过jQuery或纯javascript来确定iPhone/iTouch的方向?

5 回复 | 直到 15 年前

1

46

CÅur Gustavo Armenta 5 年前

window.orientation

<body onorientationchange="updateOrientation();">

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.

2

22

Pawel Dubiel 12 年前

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;

  }

});

编辑:

虽然这在iPhone上是正常的,但在其他设备上可能无法正常工作。

http://phoboslab.org/log/2012/06/x-type-making-of

他的例子是更具跨浏览器/设备兼容性。

Mobile Safari和Chrome都支持方向更改事件, 这使得这很容易。但是,我们不能依靠窗口定位, 它以度(0、90、180或270)为单位报告旋转,因为一些设备报告纵向模式为0°,而其他设备报告纵向模式为0°

解决方法是只检查窗口高度是否大于宽度如果是这样,我们显然处于纵向模式!但事实上太简单了,Chrome的浏览器给我们带来了另一个挑战:它只是在触发方向更改后更新窗口尺寸

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 );

3

CÅur Gustavo Armenta 6 年前

请参阅的“处理定向事件” https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

4

2

DATEx2 11 年前

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;

}

这只适用于手机和平板电脑 ! 片剂之间的基本方向(情况0)不同。三星手机壳0是横向的,iPad手机壳0是纵向的。

5

1

Community CDub 7 年前

高:1200宽:800(纵向)
h:1200 w:800(景观)

h:1200 w:800(景观)

仔细看,我被CSS3的解决方案绊倒了:
How to use javascript conditionally like CSS3 media queries, orientation?