javascript - 触发 orientationchange 事件时屏幕高度错误

Question

我写了下面的代码来检查我的手机屏幕高度，当我将它旋转到 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的高度。有人可以建议如何修复它吗？

谢谢

Answer 1

resize 事件在 orientationchange 事件之后触发。然而，resize 也可能被其他事情触发，例如显示虚拟键盘。

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

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

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