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

Posted 2023-02-23

【中文标题】iPad不会触发从垂直到水平的调整大小事件？

【英文标题】：iPad doesn't trigger resize event going from vertical to horizontal?

【发布时间】：2011-02-14 00:19:39

【问题描述】：

有没有人注意到这种行为？我正在尝试编写一个在调整大小时触发的脚本。它在普通浏览器上运行良好，在 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. */
    ;
);

【问题讨论】：

添加标签 webapp 或 iphone-web ?

【参考方案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.

    

【讨论】：

我选择了您的答案，因为它是最简洁的正确答案。不过，作为一个符号点，我采用的解决方案没有包含任何if 检查。当方向改变时，它只是运行代码（即页面重新加载）。

@dclowd9901 是的，我想是的，我只是想提供一些额外的信息:)

你忘记了orientation === 180。就是当 iPad 上下颠倒的时候。

7 年后，这个答案仍然拯救了我。非常感谢。

值得注意的是 onorientationchange 事件是在屏幕尺寸实际改变之前触发的，所以如果你打印出高度/宽度，你会得到你刚刚离开的方向的数字。跨度>

【参考方案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 事件。

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

【讨论】：

我还不能测试这个，但这可能正是我正在寻找的。通用 iPad 开发的通用资源。提前感谢artlung！我期待着尝试一下！

酷！希望它有帮助。我有一个朋友刚买了一个，很想玩。

这似乎不起作用。 Safari 浏览器似乎无法识别 orientationchange 属性。

我没有 iPad 或 iPhone 可供测试。那是你要测试的地方吗？

@dclowd: window.**on**orientationchange.

【参考方案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.

            
                 
        

【参考方案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 的程序如何。

【讨论】：

感谢您查找并添加标签。让我更加困惑的是，我不是 javascript 禅宗大师，所以我什至不确定我是否将代码正确地组合在一起。

@dclowd9901 - 代码看起来不错，只是在if 后面多了一个; :) 很好奇，为什么页面调整大小时需要重新加载？

我编写的幻灯片插件中有一个功能，可以通过参数进行全屏查看。用户提请我注意，缺乏适应的窗口调整大小是一个疏忽。在发布新的测试版本之前，我试图写一个创可贴，但遇到了我发布的问题。

【参考方案5】：

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

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

【参考方案6】：

检查您的 ios 版本。

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

【参考方案7】：

好好检查一下你的平台是不是 iPad，

通过捕获 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)
           

【讨论】：

我认为最好先检查window.orientation，然后在大多数情况下明确检查设备。