Get Android Chrome Browser Address bar height in JS

Because 100vh will be larger than the visible height when the URL bar is shown. According to this.

You can calculate the height of the URL bar by creating a 0-width element with 100vh height.

<div id="control-height"></div>

#control-height {
    height: 100vh;
    width: 0;
    position: absolute;
}

Then using javascript compare window.innerHeight with the height of this element.

const actualHeight = window.innerHeight;
const elementHeight = document.querySelector('#control-height').clientHeight;

const barHeight = elementHeight - actualHeight;

Had the same issue today, turns out there is no easy way to figure out the height of the url bar directly. As far as I know, none of the directly accessible variables in javascript can tell you how much the size of "100vh" really is.

On mobile browsers, 100vh may or may not include the height of the url bar, which leaves us in a tricky situation, if we want to size a div to the exact height of the visible content area of the browser during load.

I figured out a workaround though that worked pretty neat for me, here's what I did:

1. add a dummy property on your html root element with a size of 100vh. In my case, i used the "perspective" attribute, which worked for me

2. then you can get the address bar size with the following code:

   var addressBarSize = parseFloat(getComputedStyle(document.documentElement).perspective) - document.documentElement.clientHeight
   

The thing you're are looking for is url bar resizing. Since Android's chrome v56, it's recommended by David Bokan to use vh unit on mobile. There is a demo in that article, clicks the link to get more informations and how to use it on mobile.

When the user is scrolling down the page, a window.resize event is throwed. You could update your page by catching this event with an event listener.

More informations : mobile chrome fires resize event on scroll