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

问题描述

我的网站可以在任何大小的屏幕（移动设备或台式机）上呈现，但是，如果用户更改方向（或在桌面上调整浏览器窗口的大小），则我的网站需要重新加载/重新呈现页面-其基本上是图库页面预览图像，在图像之间设置一定的间距。问题在于，由于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的文章。由于某种原因，在Java媒体查询方面，悬停mq和指针mq似乎对我不起作用。

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

解决方法

您可以使用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-表示找到的用户界面元素紧接在文件上方或上方，视乎默认视图的媒体。如果用户代理没有这样的用户界面元素，则对象可以像相应的用户一样操作接口元素不存在（即其可见属性可能会返回错误）。

请注意，您不能设置该值，但可以读取其值，然后根据该值是什么来采取措施。

javascript url window-resize