Find height of mobile Safari chrome?

I'm loading an element in the browser and then resizing it based on the window height:

        window_height = $(window).height();
        $("map-canvas").height(window_height);

It works okay in every browser except mobile Safari.

In mobile Safari, the page loads with the correct height.

But shortly afterwards, the top browser chrome disappears (though the bottom button bar remains).

When that happens, the page contents move up, but leave a big space at the bottom, the same height as the browser chrome.

How can I find and compensate for the height of the browser chrome?

Ideally I'd do (pseudocode):

if browser chrome is visible:
    subtract height of browser chrome from window height
set map height to window height
add event listener - when browser chrome disappears:
    set map height to window height + height of browser chrome开发者_JAVA技巧

add event listener - when browser chrome disappears: set map height to window height + height of browser chrome

You can use window resize event

window.resize = function(){
  document.getElementById('map-canvas').style.height = window.height + 'px';
}

I think that I've found a way how to get proper window height on iOS Mobile Safari, check my answer to similar question - jQuery/JS, iOS 4 and $(document).height() problems

You should just use the window.innerHeight property. This will get you the available height of the window sans the chrome.

Also, if you have never looked at some window.screen Object, this will give you other useful properties.

Example:

window.screen

Screen {
    availHeight: 1200,
    availLeft: 1680,
    availTop: 0,
    availWidth: 1920,
    colorDepth: 24,
    height: 1200,
    pixelDepth: 24,
    width: 1920
}

window.innerHeight

916

So you can clearly see that the chrome on my browser chrome takes up 284px.

var browserChrome = (window.screen.height - window.innerHeight);