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

Question

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

示例:

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

Answer 1

没有确切的解决方案

在任何浏览器中都没有本地方法可以执行此操作。然而，使用尺寸和窗口调整大小事件，已经开发出解决方案。 See this Stack Overflow answer 。但是，除非绝对必要，否则我不会推荐这样做，原因如下:

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

<小时/>

替代方案

window.onresize 事件

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

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

window.innerHeight 属性

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

var windowHeight = window.innerHeight;

<小时/>

响应式设计

根据视口(viewport)大小更改内容的更好替代方案，本地址栏隐藏自身时，视口(viewport)大小会发生变化。请参阅this article by w3schools .