Detect if address bar is shown in iPhone browser

Question

I'm trying to detect, in a future-proof and device-independent way, when the address bar in the iPhone browser is showing. This is the toolbar that is shown at the top in order to display the URL. It can be hidden by calling:

window.scrollTo(0, 0)

What I'd like to do, is detect when it's being show (thus reducing the available viewing space) and set a timer to hide it again a second or so later. Any more frequent than that and it'll be quite annoying since users won't be able to get to the address bar.

I've tried checking window.pageYOffset, unfortunately, this returns zero if any part of the url bar is visible.

I don't want to hard code any dimensions on the iPhone and check those against the current viewport size. It's too fragile.

Anyone know a solution here?

Answer 1

The window.innerHeight property is what you're looking for. This is the height of the actual content on the screen. It's significantly less when the toolbar at the top is visible, because there's less room for the content. There is a slight problem that I can't seem to figure out on my iPhone 4 - window.innerHeight sometimes returns 3 pixels less at certain scroll positions of the screen.

I've set up an example for you that does more or less what you asked, it should at least get you started:

http://jsfiddle.net/rUSEb/show/light (test it out on your iphone).