如何识别移动设备中的地址栏？

Question

当您在任何网站中向下或向上滚动地址栏时 show/hide。我希望确定栏何时隐藏或可见。

示例：

if (chromeBarIsHidden()) {
console.log('a');
} else {
console.log('b');
}

Answer 1

没有精确解

在任何浏览器中都没有执行此操作的本机方法。但是，使用维度和 window 调整大小事件，已经开发了解决方案。 。但是，除非绝对必要，否则我不推荐这样做，原因如下：

• 浏览器可能在 window 调整大小的计算机上，导致 window.onresize 事件无法准确表示更改
• 不同的移动浏览器处理顶栏隐藏的方式不同。如果您确定客户端在 Android Google Chrome.
上，则上述解决方案可能有效
• 用户可能希望您网页中的 UI 元素随着顶部应用栏的隐藏而移动，从而导致跨网页的用户体验不一致

---

备选方案

window.onresize 事件

只要浏览器的 window 大小发生变化，就会触发 window.onresize 事件。这可用于通过 JavaScript 使用不同的 window 大小来调整页面大小和更改页面布局。要使用它，请参见下面的示例。

window.onresize = function() {
    // Do something on resize
}

window.innerHeight 属性

window.innerHeight属性returns视口的视图高度。这可用于确定布局安排是否需要根据高度进行更改。

var windowHeight = window.innerHeight;

---

响应式设计

根据视口大小进行更改的更好替代方法，视口大小会在地址栏隐藏时发生变化。参见 this article by w3schools。