iPhone Address Bar blocks HTML Page Header Buttons?

Question

I have a mobile website with two header buttons. In portrait mode on iPhone it works fine. I can push the buttons.

Here is the problem:

When I switch to Portrait mode and try to tap on the buttons the native iPhone address bar shows up. It comes over the header so I cannot push the buttons.

The images show the problem:

After pushing one button you see this:

How can I prevent this problem?

Is there a way to detect i the iPhone browser bar is shown to the user?

Edit: When you use Safari whatever page you are on and turn your phone into landscape orientation and tap too much at the top of the page the address bar shows up. If you page has a fixed header bar you cannot reach it.

Edit: When I make the header position fixed then it turns out that I cannot tap the header buttons anymore when the orientation changes to landscape and the address bar shows up.

Edit: Here is a sample project which I use: http://mobilegwt.appspot.com/showcase/ You can try this on an iPhone and see the effect I showed in the images.

Answer 1

Maybe you should try to add the meta tag to run in full-screen mode :

<meta name="apple-mobile-web-app-capable" content="yes" />

Referenced at this link.

EDIT

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">