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

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也会在触摸结束后重新绘制。

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