隐藏地址栏时移动浏览器不会触发调整大小事件答案

【问题标题】：Mobile browsers don't fire up resize event when hiding address bar隐藏地址栏时移动浏览器不会触发调整大小事件
【发布时间】：2013-08-10 20:30:27
【问题描述】：

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

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

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

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

所以我尝试自己发送一个orientationchange 事件，但没有成功。

有什么方法可以让 Firefox 和默认浏览器像 Chrome 一样运行？

这里是website。

【问题讨论】：

由于您无法更改默认浏览器行为，您可能需要每隔 5 秒左右检查一下高度是否发生了变化。
我试过这个，但问题是window.innerHeight的值没有更新。
您确定窗口高度会改变吗？移动浏览器对这些事情可能很有趣。
在 Firefox 中，窗口高度仅在方向改变后才会改变。如果我只是向下滚动窗口高度不会改变。
我也有同样的问题，当我在谷歌浏览器中向下滚动时，Android 工具栏被隐藏并且改变了高度的值。当我向上滚动时，工具栏将显示并再次更改高度值。

标签： javascript html css google-chrome mobile

【解决方案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 设置样式的元素也只会在触摸结束后重绘。

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

【讨论】：