21

出于好奇，我一直在使用 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 的方向？

4

5 回答 5

45

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.
于 2010-02-24T02:49:46.350 回答
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找到的信息

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

移动 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 );
于 2012-07-18T14:38:40.597 回答
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;

}

这仅适用于手机和平板电脑！平板电脑的基本方向（案例 0）不同。三星外壳 0 是横向，iPad 外壳 0 是纵向。

于 2013-02-04T15:31:48.113 回答
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 的解决方案：
如何有条件地使用 javascript，如 CSS3 媒体查询、方向？
这可能比调整 Js 解决方案更好。

于 2012-02-17T11:35:59.097 回答