检测浏览器是否有自动隐藏 URL 栏答案

【问题标题】：Detect if browser has autohide URL bar检测浏览器是否有自动隐藏 URL 栏
【发布时间】：2020-10-02 17:45:55
【问题描述】：

我的网站可以在任何尺寸的屏幕、移动设备或桌面上呈现，但是，如果用户更改方向（或调整桌面上浏览器窗口的大小），我的网站需要重新加载/重新呈现页面 - 它基本上是一个图库页面预览图像，在图像之间设置一定的间距。问题在于，在移动浏览器上，由于 URL 栏自动隐藏功能，每当用户向上/向下滚动时都会触发 resize 事件。

我有一些 Javascript 可以处理大多数情况，只是用户仅在桌面上垂直调整浏览器窗口大小的边缘情况在桌面上不会触发，因为脚本只会检查宽度的变化。

var resizeTimeout;

var wow = window.outerWidth;

window.addEventListener('resize', 
    function(event) {

        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(
            function(){
                if (window.outerWidth !== wow) {
                    window.location.reload(true);

                    wow = window.outerWidth;
                }
            }, 500
        );
    }
);

我已阅读与浏览器检测字符串、功能检测和 Modernizr 相关的帖子。由于某种原因，悬停 mq 和指针 mq 在 Javascript 中的媒体查询方面似乎对我不起作用。

有什么方法可以检测浏览器是否在使用那些烦人的自动隐藏 URL 栏？这将帮助我找到用户在桌面上垂直调整浏览器窗口大小的情况。我不想禁用网址栏。但是永久修复它使其无法自动隐藏是我正在考虑的选项。有什么想法吗？

【问题讨论】：

标签： javascript url mobile window-resize

【解决方案1】：

您可以使用BarProp 接口来检查哪些条是可见的。

例如：

// check if location bar is visible
let locationBarVis = window.locationbar.visible ? "location bar visible" : "location bar invisible";

// check if menu bar is visible
let menuBarVis = window.menubar.visible ? "menu bar visible" : "menu bar invisible";

// check if toolbar is visible
let toolbarVis = window.toolbar.visible ? "toolbar visible" : "toolbar invisible";

console.log(locationBarVis, menuBarVis, toolbarVis);

如上链接所述：

window.locationbar - 代表用户界面元素包含显示活动文档的 URL 的控件，或一些类似的界面概念。

window.menubar - 表示包含菜单形式的命令列表，或一些类似的界面概念。

window.toolbar - 表示找到的用户界面元素紧接在文件上方或之前，视情况而定默认视图的媒体。如果用户代理没有这样的用户界面元素，则该对象可以像对应的用户一样行事界面元素不存在（即它的可见属性可能会返回假）。

请注意，您无法设置该值，但您可以读取其值，然后根据该值的内容采取行动。

【讨论】：