Question

我将下面的代码编辑为检查我的移动屏幕高度，当我将其旋转到Portrait或Landscape时。

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

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

当我将其旋转到Portrait时，我得到0,294。当我将其旋转到Landscape时，我得到90,419。这个数字相反，我试图将其包裹在{ {1}}但它不起作用。

$(document).ready()

看起来当我将手机旋转到$(document).ready(function(){ alert($(window).height()) })时，我得到Portrait的高度，当我将手机旋转到Landscape时，我得到{Landscape的高度1}}。有人可以建议如何解决它吗？

由于

Answer 1

在 orientationchange 事件后触发调整大小事件。但是，调整大小也会被其他内容触发，例如显示虚拟键盘。

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

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

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

Answer 2

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

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

}

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

2 个答案: