Get Android Chrome Browser Address bar height in JS

resize chrome address bar
mobile safari address bar height
mobile chrome vh-fix
mobile address bar height issue
height: 100vh not working in safari
100vh mobile url bar
shrink chrome address bar
hide address bar chrome android

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 while scrolling down and I need to react to that because the viewport height is different then.

One solution I already figured out:

  1. Get viewport height at initial state: var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  2. Get viewport height when the address bar has disappeared

  3. Compute difference between both values

Problem is that you have to be in the second state to know that.


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

URL Bar Resizing | Web, Hiding the URL bar no longer resizes mobile pages. For example, giving the <​html> element a style of width: 100%; height: 100% will make it the same size as​  To avoid the address bar on mobile chrome wont hide on scroll down: dont body display flex - make a body child div container with display flex. dont make body height 100% > div height 100% -- should be body height 100% > div without height 100%.


Best approach for me was to have something like that:

$(document).ready(function(){   

var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isPortrait = viewportHeight > viewportWidth;

$( window ).resize(onresize);

function onresize() {
        var newViewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var newViewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var hasOrientationChanged = (newViewportHeight > newViewportWidth) != isPortrait;
        var addressbarHeight = 130;

        if (!hasOrientationChanged && (newViewportHeight != viewportHeight)) {
            addressbarHeight = Math.abs(newViewportHeight - viewportHeight);
            if (newViewportHeight < viewportHeight) {
                // Android Chrome address bar has appeared
            } else {
                // Android Chrome address bar has disappeared
            }
        } else if(hasOrientationChanged) {
            // Orientation change
        }

        viewportHeight = newViewportHeight;
        viewportWidth = newViewportWidth;
        isPortrait = viewportHeight > viewportWidth;
}
});

100vh behavior on Chrome - DEV Community ‍ ‍ , (I had originally used height, but I found that long titles would get cut off on Both Firefox and Chrome on Android do this thing where as you scroll In Firefox, when the address bar is visible, the full height ( 100vh in CSS) is the on all parent elements up to and including the body and the html elements. This is a simple trick to move Chrome Address bar to the bottom of Android screen by enabling Chrome Home flag on Google Chrome Browser. You can move back chrome address bar to top if you don't like. So far we like the idea of chrome bottom address bar.


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
    

CSS3 100vh not constant in mobile browser, with 100vh, due to their design choices using the entire height of the device not including any address bars etc. Chrome’s mobile browser followed suit around a year ago. As of this writing, there is a ticket to address this in Firefox Android. While using a fixed value is nice, it also means that you cannot have a full-height element if the address bar is in view. The bottom of your element will be cropped.


I had a container with dynamic content that had to always have at least viewport's full height (and be scrollable if the content doesnt fit on the screen).

So if you need a fixed height, just replace "min-height" with "height" in my solution.

That's how I dealt with it.

// calculate min-height on init
$(".content-container").css("min-height", `${window.innerHeight}px`);

// recalculate the min-height everytime the bar appears or disappears
$(window).resize(() => {
    $(".content-container").css("min-height", `${window.innerHeight}px`);
});

It works for android's address bar and also safari's bars (in safari mobile there can be top and the bottom bar aswell).

Then to make the transition smooth, you can apply a css rule:

.content-container{
    transition: min-height 500ms ease;
}

Vh and vw: how and why to use them in Webflow, are ideal for responsive design because they are completely independent of the base font size. In windows chrome, works fine unless you change the display size to, say, 50% then this utility will report 34px, while they remain at 17px. 200% reports 8px. – jedierikb Aug 16 '12 at 1:57. what do you mean by "change the display size to


The trick to viewport units on mobile, Chrome's mobile browser followed suit around a year ago. As of this writing, there is a ticket to address this in Firefox Android. An element gets cropped at the bottom when the address bar is in view (left) but what we want is the full thing (right). Now let's get the inner height of the viewport in JavaScript: // The stock Android browser has a location bar height of 56 pixels, but // this very likely could be broken in other Android browsers. page . style . height = ( window . innerHeight + 56 ) + 'px'


Fit to height in Android Chrome - HTML & CSS, I'm trying to get this page displayed at maximum height at 16:9 ratio. It works fine in all browsers except in android chrome browser where the bottom is cropped. The URL bar takes up space and if you scroll it disappears and then your page  It works for android's address bar and also safari's bars (in safari mobile there can be top and the bottom bar aswell). Then to make the transition smooth, you can apply a css rule: .content-container{ transition: min-height 500ms ease; }


Fix for 100vh with mobile address bar visible? : Frontend, If you're looking to find … On mobile, 100vh is the height of the visible area with the address bar hidden, Automatically hiding address bar - Doesn't seem to work on the latest mobile browsers No need to use js for this one. only hide the address bar if you scroll with HTML, but Safari and Chrome will hide with either. The resizing behavior of the URL bar is changing in Chrome on Android starting in version 56. Here's what you should know: Lengths defined in viewport units (i.e. vh) will not resize in response to the URL bar being shown or hidden. Instead, vh units will be sized to the