Get Android Chrome Browser Address bar height in JS

Question

How do I get the height of the address bar in JavaScript in the Chrome browser for Android (marked by red rectangle in left picture)? I need to know that as it disappears wh

Answer 1

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.

#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.getElementById('control-height').clientHeight;

const barHeight = elementSize - actualSize;