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

Question

在任何网站中向下或向上滚动时，地址栏都会显示/隐藏。我希望识别酒吧何时隐藏或可见。

示例：

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

Answer 1

没有确切的解决方案

在任何浏览器中都没有本机方法可以做到这一点。然而，使用尺寸和窗口调整事件，已经开发出了解决方案。请参阅此堆栈溢出答案。然而，除非绝对必要，否则我不会建议这样做，原因如下：

• 浏览器可能位于窗口调整大小的计算机上，导致window.onresize事件无法准确表示更改
• 不同的移动浏览器对隐藏顶部栏的处理方式不同。如果你确定客户端在安卓谷歌浏览器上，上述解决方案可能会起作用
• 用户可能期望网页中的UI元素随着顶部应用程序栏的隐藏而移动，从而导致网页之间的用户体验不一致

---

备选方案

window.onresize事件

每当浏览器的窗口大小发生变化时，window.onresize事件就会触发。这可以用于通过具有不同窗口大小的JavaScript调整页面大小和更改页面布局。要使用它，请参阅下面的示例。

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

window.innerHeight属性

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

var windowHeight = window.innerHeight;

---

响应式设计

根据视口大小更改内容的更好选择，当地址栏隐藏时，视口大小会发生变化。请参阅w3schools的这篇文章。