9

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

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

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

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

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

有没有办法让 Firefox 和默认浏览器表现得像 Chrome？

这是网站。

4

1 回答 1

7

事实上，移动浏览器（经过测试的 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也只会在触摸结束后重绘。

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

于 2017-08-31T13:14:55.377 回答