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 m

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;">

Answer 2

You can give a try add min-height to your body.

<style>
    body { min-height: 505px; }
</style>

This is the source.

Answer 3

Have you tried adding a padding to the body? All of the fixed header designs have this. The padding to the body is equal to the height of the bar on your site that contains the icons. You can do them inside media queries if it's only on landscape:

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {

body {padding-top:20px} /*your padding*/

}