iPad 不会触发从垂直到水平的调整大小事件？

Question

有人注意到这种行为吗？我正在尝试编写一个在调整大小时触发的脚本。它在普通浏览器上运行良好，在 iPhone 上运行良好，但在 iPad 上，只会触发从水平到垂直视口，反之亦然。

这是代码：

$(window).resize( function() {

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));

    if(is_iphone || is_ipad){
        location.reload(true);
    } else {     
        /* Do stuff. */
    };
});

Answer 1

如果我理解正确的话，你想要在用户倾斜 iPad 时执行某些操作。给你：

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){

        // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

}

Answer 2

我认为你想要的是使用 iPad Orientation CSS，如下所示：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

另外，根据iPad Web 开发技巧。

总之，这应该为您提供足够的工具来应对变化。

Answer 3

这包括所有方向。

这里有两个选择：

window.onorientationchange = function() {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {
    // iPad is in Portrait mode.

    } else if (orientation === 90) {
     // iPad is in Landscape mode. The screen is turned to the left.

    } else if (orientation === -90) {
     // iPad is in Landscape mode. The screen is turned to the right.

    } else if (orientation === 180) {
    // Upside down portrait.

    }
}    

或者

// Checks to see if the platform is strictly equal to iPad:
    if(navigator.platform === 'iPad') {
            window.onorientationchange = function() {

            var orientation = window.orientation;

            // Look at the value of window.orientation:

            if (orientation === 0) {
            // iPad is in Portrait mode.

            } else if (orientation === 90) {
             // iPad is in Landscape mode. The screen is turned to the left.

            } else if (orientation === -90) {
             // iPad is in Landscape mode. The screen is turned to the right.

            } else if (orientation === 180) {
            // Upside down portrait.

            }
          }       
        }

Answer 4

我能从苹果找到的唯一东西：

iPad 上的 Safari 和 iPhone 上的 Safari 没有可调整大小的窗口。在 iPhone 和 iPad 上的 Safari 中，窗口大小设置为屏幕大小（减去 Safari 用户界面控件），并且用户无法更改。要在网页上移动，用户可以通过双击或捏合来放大或缩小，或者通过触摸并拖动来平移页面来更改视口的缩放级别和位置。当用户更改视口的缩放级别和位置时，他们是在固定大小的可视内容区域（即窗口）内进行操作。这意味着位置“固定”到视口的网页元素最终可能会出现在可视内容区域之外、屏幕外。

我理解“适用于 iPhone”部分……但也许现在不再适用了？这可能是自最新公开 iPhone 操作系统版本发布以来操作系统/移动 Safari 的变化（上述文档来自 2010 年 3 月）。

我将重新标记这个问题，添加 iPhone，也许使用开发者 4.0 操作系统版本的人之一可以测试这个？如果是这样的话，它已经被删除了，这应该是一个在它上线之前提交/修复的错误……我不确定苹果的程序是如何的。

Answer 5

您希望修复 iPhone 和 iPad 上的方向错误。
在这里阅读：
http://www.blog。 highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

github 最新版本在这里：
https://gist.github.com/901295
使用页面上的第二个版本。

Answer 6

检查您的 iOS 版本。

“orientationchange”事件在 iOS 3.* 中不起作用，但在 4.* 中起作用

Answer 7

1. 仔细检查您的平台是否为 iPad，

2. 通过捕获 window.onorientationchange 处理 iOS 特定事件orientationchange

   if(navigator.platform == 'iPad') {
       window.onorientationchange = 函数() {
           // 处理方向改变事件
           //（这里你可以利用方向属性
           // - 请参阅上面 Vincent 的好答案）
       }       
   }