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

Question

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

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

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

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

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

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

这是网站 。

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样式的元素也会在触摸结束后重绘。

此外，如果调整函数导致滞后，则处理程序应该被去抖动。