隐藏地址栏时，移动浏览器不会启动调整大小事件 [英] Mobile browsers don't fire up resize event when hiding address bar

问题描述

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

I have two sections on my website, whose height I set to window.innerHeight. When the resize event is fired the height is updated.

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

This works perfectly on my desktop, but on my android phone I get some problems.

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

In Chrome for android, if you scroll down so that the address bar gets hidden and the window size changes, Chrome fires a resize event and the height is updated.

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

Firefox and the default android browser don't fire this resize event after hiding the address bar. If I change the orientation of the device manually from portrait to landscape and back the height is updated like it should.

所以我尝试自己调度orientationchange事件，但是这个没用。

So I tried to dispatch an orientationchange event myself, but this didn't work.

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

Is there a way I can get Firefox and the default browser to behave like Chrome?

这是网站。

推荐答案

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

Indeed mobile browsers (tested Android/Chrome iOs/Safari), when toggling address bar, fire the resize event only after user takes finger off the screen.

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

However we can use the touchmove event, that made the browser hide or show the address bar in the first place. In the handler we can use window.innerHeight property to detect changes in the viewport height. Using jQuery:

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

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

It's not perfect, but nevertheless it is the only working solution I came up with.

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

The whole behavior is kinda quirky, because even elements styled using position: fixed will be redrawn only after the touch ends.

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

Additionally if the adjustment function causes lag, the handler should probably be debounced.

这篇关于隐藏地址栏时，移动浏览器不会启动调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！