隐藏地址栏时，移动浏览器不会启动调整大小事件

Question

我的网站上有两个部分，其高度设置为window.innerHeight。触发resize事件时，高度会更新。

这在我的桌面上完美运行，但在我的Android手机上我遇到了一些问题。

在Chrome for Android中，如果向下滚动以隐藏地址栏并更改窗口大小，Chrome会触发调整大小事件并更新高度。

Firefox和默认的android浏览器在隐藏地址栏后不会触发此调整大小事件。如果我手动将设备的方向从纵向更改为横向并向后更改高度，则应更新高度。

所以我试着自己发送一个orientationchange事件，但是这不起作用。

我有没有办法让Firefox和默认浏览器像Chrome一样？

这是website。

Answer 1

确实移动浏览器（经过测试的Android / Chrome iOs / Safari）在切换地址栏时，只有在用户将手指从屏幕上移开后才会触发resize事件。

但是我们可以使用touchmove事件，这会使浏览器隐藏或首先显示地址栏。在处理程序中，我们可以使用window.innerHeight属性来检测视口高度的变化。使用jQuery：

$(window).on('resize touchmove', function () {
    // adjust heights basing on window.innerHeight
    // $(window).height() will not return correct value before resizing is done
});

它并不完美，但它是我想出的唯一可行的解​​决方案。

整个行为有点古怪，因为使用position: fixed设置样式的元素只有在触摸结束后才会重绘。

此外，如果调整功能导致延迟，则处理程序可能应该去抖动。