IPhone Address Bar Blocks HTML Page Header Buttons?

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 ta

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

Solution 2:

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*/

}

Solution 3:

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

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

This is the source.