How do I get the height of the mobile safari chrome?

I'm trying to load a div and position it absolutely in mobile safari - think something like the alert box.

I tried to use an absolutely positioned div with top set to 50% with a margin half the height/width:

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width开发者_Python百科: 220px;
  height: 125px;
} 

but as I realized, the viewport is going to be different than the fixed position on the page, and the element is displayed in an offset position when the browser is scrolled down. I thought I could try to move the position using javascript based on the window.pageYOffset value, but unfortunately this shows 0 whether the chrome is shown or not.

My last thought was to calculate the browser chrome height using window.outerHeight-window.innerHeight and then move the div based on this value, but unfortunately this is not working.

I've tried (w/ jquery):

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

But what I'm finding is that window.innerHeight and window.outerHeight are both the same - 306 (I've got the safari developer chrome on) - so this doesn't appear to work.

Can anyone point me in the right direction on this?

thanks!

-simon

This article describes the vewport problem, especially the grand tragic point when you get non-Retina dimensions for window.innerWidth/Height and Retina using window.ourerWidht/Height

Can't you just screengrab Safari on your iPhone then bring the photo into Photoshop or similar and measure it? Remember photos captured with the "power button-home button" key press are twice the actual size on screen so divide your height by 2.