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 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.
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;">
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*/
}
You can give a try add min-height to your body.
<style>
body { min-height: 505px; }
</style>
This is the source.
链接地址: http://www.djcxy.com/p/75718.html下一篇: iPhone地址栏阻止HTML页眉按钮？