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 development tips，当方向改变时会触发orientationchange 事件。

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

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

The only thing I could find from apple:

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

我了解“适用于 iPhone”的部分......但也许它不再适用了？这可能是 OS/移动 Safari 的变化，因为最新的公共 iPhone OS 版本发布（上述文档来自 2010 年 3 月）。

我将重新标记这个问题，将 iPhone 添加到它，也许开发者 4.0 操作系统版本的其中一位可以测试这个？如果是这种情况，它已被删除，这应该是在它上线之前提交/修复的错误......不过，我不确定 Apple 的程序如何。

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 = function() {
           // handle orientationchange event
           // (here you can take advantage of the orientation property
           //     - see the good answer above by Vincent)
       }       
   }