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.

    }

}

The left picture shows portrait mode, the right one landscape mode

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上工作”部分......但也许它不再存在了？这可能是自最新的公共iPhone OS版本发布以来OS /移动版Safari的变化（上述文档是从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

检查您的平台是否为iPad，

通过捕获window.onorientationchange

来处理iOS特定的事件方向更改

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

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

7 个答案: