能否使用js/jQuery来确定iPhone的方向？

Question

能否使用js/jQuery来确定iPhone的方向？

22

出于好奇，我一直在使用jQuery来确定浏览器的屏幕大小，想到屏幕大小可以用来确定访问者是否使用iPhone / iTouch浏览网站。

于是我使用了以下内容进行测试：

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

在使用iPhone查看页面时，我注意到尺寸始终如一（无论方向）：

x: 320，y: 396

这是不考虑方向的。我还没有尝试使用onChange事件来检测更改（主要是因为我对jQuery还很陌生），但我想知道是否有一种通过jQuery或纯JavaScript来确定iPhone/iTouch方向的方法？

- David Thomas

5个回答

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;

  }

});

编辑:

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

我想添加一些我在http://phoboslab.org/log/2012/06/x-type-making-of上找到的信息。

而他的示例更加跨浏览器和设备兼容。

Mobile Safari 和 Chrome 都支持 orientationchange 事件，这使得事情变得简单。但是我们不能依赖于 window.orientation，因为它会报告旋转角度（0、90、180 或 270），而有些设备将横向模式报告为 0°，而另一些则将纵向模式报告为 0°。多么方便啊！

解决方案就是检查窗口高度是否大于宽度-如果是，那么我们显然处于纵向模式下！但由于这太简单了，Chrome 浏览器为我们提供了另一个挑战：它只在触发 orientationchange 事件后才更新窗口尺寸。所以我们需要监听 orientationchange 和 resize 事件。唉。

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

1

将宽度与高度进行比较存在许多问题：1.在某些设备上，innerHeight/Width在启动时的某个“未定义”时间内为0；2.在某些设备上，innerHeight/Width被设置为一些奇怪的值，如720（宽度和高度相等）；3.一些设备在键盘弹出时会更改宽度和高度；4.在方向更改事件触发之前，宽度/高度并不总是会改变。很遗憾，我还没有找到任何好的解决方案，我们只是在努力应对这个问题。 - 1800 INFORMATION

3

请参考处理方向事件。

- Randal Schwartz

2

仅限移动电话/平板电脑

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;

}

这仅适用于手机和平板电脑！基本方向（case 0）在平板电脑上有所不同。三星的 case 0 是横向的，iPad 的 case 0 是纵向的。

- Paulius

1

我尝试了一种类似的方法，使用.height()和.width()来跨平台处理平板电脑，然后比较哪个更大。它在iOS5（在Ipad2上测试）和BlackBerry Rim上运行良好，但显然在Android（3.2和4.0.3）上不起作用。在Android上，第一次加载网站时，它会给我正确的高度和宽度，但是改变屏幕方向后，它总是落后一步。
例如，使用800x1200的尺寸从纵向模式开始：
h:1200 w: 800（纵向）
h:1200 w: 800（横向）
h:800 w: 1200（纵向）
h:1200 w: 800（横向）

查看后，我发现了这个使用CSS3的解决方案：
如何像CSS3媒体查询、方向那样有条件地使用javascript？
这可能比调整Js解决方案更好。

- ABBDVD

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- typeoneerror · Accepted Answer

window.orientation会给你一个整数，表示旋转的方向。你可以通过为body添加事件来监听方向变化：

<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.