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. */
    };
});

- dclowd9901

---

添加标签webapp或iphone-web？ - Emil

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.

    }

}

- Vincent

---

@dclowd9901 是的，我也是这么想的，只是想提供一些额外的信息 :) - Vincent

你忘记了当 orientation === 180 的时候。这是指iPad被颠倒过来的情况。 - Alexandre Khoury

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

@Gabbax0r 哇，太疯狂了。我还是个青少年时写的！很高兴我能帮到你。 - Vincent

需要注意的是，onorientationchange事件在屏幕尺寸实际更改之前就已经触发了，因此如果您打印高度/宽度，您将得到刚刚离开的方向的数字。 - GreySage

Answer 2

我认为您想要的是使用iPad方向CSS，它看起来像这样：

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

同时，根据iPad网页开发技巧，当方向改变时，orientationchange事件将会触发。

这些工具应该足以处理变化。

- artlung

---

我还无法测试，但这很可能正是我正在寻找的。对于iPad开发来说，这是一个很好的通用资源。提前感谢你，artlung！我期待着尝试一下！ - dclowd9901

很酷！希望它有用。我有一个朋友刚刚买了一个，我迫不及待地想玩一下。 - artlung

我没有 iPad 或 iPhone 进行测试。你是在那里进行测试的吗？ - artlung

@dclowd：window.onorientationchange. - kennytm

@KennyTM：看起来我们有一个获胜者。将其作为答案发布，并领取您的奖品 ;) - dclowd9901

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.

            }
          }       
        }

- user1149756

Answer 4

我能从苹果找到的唯一信息：

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

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

我打算重新标记这个问题，加上iPhone，也许有人用开发者4.0操作系统的版本可以测试一下？如果是这样的话，它已经被移除了，应该在发布之前修复这个bug...不过我不确定苹果公司的程序是怎样的。

- Nick Craver

---

感谢您查找并添加标签。更让我困惑的是，我不是JavaScript大师，所以我甚至不确定我是否正确地组合了代码。 - dclowd9901

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

我编写了一个幻灯片插件，其中包含全屏查看功能及其参数。用户提醒我没有考虑窗口大小调整的问题。在发布新的测试版本之前，我试图写一个临时解决方案，但遇到了我所发布帖子中提到的问题。 - dclowd9901

Answer 5

您想要解决 iPhone 和 iPad 上的方向 bug。 在这里了解详情： http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

最新版本已上传至 github： https://gist.github.com/901295 请使用页面上的第二个版本。

- B-Money

Answer 6

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

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

   if(navigator.platform == 'iPad') {
       window.onorientationchange = function() {
           // 处理orientationchange事件
           // （在这里，您可以利用方向属性
           //     - 参见Vincent上面的好答案）
       }       
   }
   

- Steak Overflow

---

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

Answer 7

检查您的iOS版本。

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

- JoeDuncan