方向更改后的移动视口高度

Question

我将监听器附加到 orientationchange 事件：

 window.addEventListener('orientationchange', function () {
    console.log(window.innerHeight);
});

我需要在 orientationchange 之后获取文档的高度。但是，该事件在轮换完成之前触发。因此，记录的高度反映了实际方向改变之前的状态。

如何注册一个事件，以便在完成方向更改后捕获元素尺寸？

原文由 Dan Kanze 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

方向变化需要延迟才能适应新的高度和宽度。这在 80% 的时间都有效。

 window.setTimeout(function() {
    //insert logic with height or width calulations here.
}, 200);

原文由 Dan Kanze 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用调整大小事件

调整大小 事件将在 orientationchange 之后包含适当的宽度和高度，但您不想监听所有调整大小事件。因此，我们在方向更改后添加一个一次性调整大小事件侦听器：

_脚本_：

 window.addEventListener('orientationchange', function() {
    // After orientationchange, add a one-time resize event
    var afterOrientationChange = function() {
        // YOUR POST-ORIENTATION CODE HERE
        // Remove the resize event listener after it has executed
        window.removeEventListener('resize', afterOrientationChange);
    };
    window.addEventListener('resize', afterOrientationChange);
});

_查询_：

 $(window).on('orientationchange', function() {
    // After orientationchange, add a one-time resize event
    $(window).one('resize', function() {
        // YOUR POST-ORIENTATION CODE HERE
    });
});

不要使用超时

超时是不可靠的——有些设备将无法在您的硬编码超时内捕捉到它们的方向变化；这可能是出于不可预见的原因，或者是因为设备速度慢。反之，快速设备会在代码中产生不必要的延迟。

原文由 Christopher Bull 发布，翻译遵循 CC BY-SA 4.0 许可协议