Detect if browser has autohide URL bar

Question

My site renders on any size screen, mobile or desktop, however, if the user changes the orientation (or resizes the browser window on desktop), my site needs to reload/re-render the page - its basically a gallery page of preview images, set with certain spacing between the images. The problem is that on mobile browsers the resize event fires whenever the user scrolls up/down, because of the URL bar autohiding function.

I have some Javascript that takes care of most cases, just that the edge case of a user resizing the browser window vertically only on desktop wont fire, because the script will only check changes in width.

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
        );
    }
);

Ive read the posts, related to browser detection strings, feature detection, and Modernizr. For some reason hover mq and pointer mq dont seem to be working for me in terms of media queries in Javascript.

Is there any way to detect if a browser is using those annoying autohide URL bars? It will help me to find the case where the user is vertically resizing the browser window on desktop. I dont want to disable the the url bar. But fixing it permanently so it cant autohide is the option Im considering. Any ideas?

user_927172 · Answer

You could use the BarProp interface to check which bars are visible.

For example:

// 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);

As mentioned in the link above:

window.locationbar - Represents the user interface element that contains a control that displays the URL of the active document, or some similar interface concept.

window.menubar - Represents the user interface element that contains a list of commands in menu form, or some similar interface concept.

window.toolbar - Represents the user interface element found immediately above or before the document, as appropriate for the default view's media. If the user agent has no such user interface element, then the object may act as if the corresponding user interface element was absent (i.e. its visible attribute may return false).

Note that you can't set the value, but you can read its value, and then take action depending on what that value is.

Detect if browser has autohide URL bar

1 Answers