4

我编写了下面的代码来检查我的手机屏幕高度，当我将它旋转到Portrait或时Landscape。

window.addEventListener("orientationchange", function(event) {
  rotateScreen();
}, false);

function rotateScreen() {
  alert(window.orientation)
  alert($(window).height())
}

当我将它旋转到 时Portrait，我得到 0, 294。当我将它旋转到 时Landscape，我得到 90, 419。数字反转，我试图将它包裹起来，$(document).ready()但它不起作用。

$(document).ready(function(){
  alert($(window).height())
})

看起来当我将手机旋转到 时Portrait，我得到了 的高度Landscape，当我将手机旋转到 时Landscape，我得到了 的高度Portrait。有人可以建议如何解决吗？

谢谢

4

2 回答 2

10

在orientationchange事件之后触发resize事件。但是，调整大小也可能由其他事情触发，例如显示虚拟键盘。

所以为了解决这个问题，我们可以先监听一个方向变化，一旦发生，我们就可以添加一个调整大小的监听器。一旦orientationchange完成，它将触发我们的resize事件。完成后，我们将删除调整大小侦听器以防止它被错误触发

$(window).on('orientationchange', function() {
    var orientationChange = function(evt) {
        rotateScreen();
        $(window).off('resize', orientationChange);
    }
    $(window).on('resize', orientationChange);
});

这有效地创建了一种伪 post:orientationChange 事件。（如果可以的话，我可能会避免使用超时）

于 2013-11-08T15:26:02.280 回答
2

添加 setTimeout 可以解决问题，请尝试以下代码：

function rotateScreen() {
    window.setTimeout(function() {
       alert(window.orientation)
       alert($(window).height())
    }, 500);

}
于 2012-09-17T06:11:00.867 回答