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

Question

我的网站可以在任何大小的屏幕上呈现，包括移动设备和桌面设备。然而，如果用户改变方向（或在桌面设备上调整浏览器窗口大小），我的网站需要重新加载/重新呈现页面 - 它基本上是一个预览图片的画廊页面，设置了一定间距。问题在于，在移动浏览器上，由于URL栏自动隐藏功能，每当用户上下滚动时，调整大小事件就会触发。

我有一些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的帖子。不知何故，Javascript中的媒体查询中的hover mq和pointer mq似乎对我无效。

有没有办法检测浏览器是否使用了那些讨厌的自动隐藏URL栏？这将有助于我找到用户在桌面上垂直调整浏览器窗口的情况。我不想禁用URL栏。但是，永久修复它以使其无法自动隐藏是我考虑的选项。有什么想法吗？

- D Joyce

Answer 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 - 表示在文档上方或前面立即找到的用户界面元素，适用于默认视图的媒体。如果用户代理没有这样的用户界面元素，则该对象可以像相应的用户界面元素不存在一样操作（即其 visible 属性可能返回 false）。

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

- JoshG