8

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:

enter image description here

After pushing one button you see this:

enter image description here

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.

Community
  • 1
  • 1
Michael
  • 32,527
  • 49
  • 210
  • 370
  • Can you link to the page? – Christina Dec 05 '13 at 00:35
  • First you say that it works in portrait mode then you wrote that you switch to portrait mode. Do you mean landscape? The second image is of the address bar, not a search bar. Search bar looks different. What version of IOS is it? I haven't had this problem in years and I'm trying to remember what it was. Is there a script in your page that hides the address bar? – Christina Dec 05 '13 at 00:42
  • @ChristinaArasmoBeymer Well I use iOS7. 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. Do you see a solution for that? – Michael Dec 05 '13 at 00:57
  • 1
    Is this related: http://blog.blairvanderhoof.com/post/62792573161/how-to-fix-the-ios-7-status-bar-from-overlapping-your – Christina Dec 05 '13 at 01:52
  • @ChristinaArasmoBeymer It is close but I have no Phone Gap I have a WebApp. – Michael Dec 05 '13 at 02:24

3 Answers3

3

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;">
Preview
  • 35,317
  • 10
  • 92
  • 112
  • Try the edit and [this plugin](https://github.com/mrmoses/jQuery.stayInWebApp), make sure you've refresh the url – Preview Dec 01 '13 at 22:34
  • Well if I save the web app to my home screen then everything is fine. The problem occurs when I use the app in my mobile safari browser. – Michael Dec 01 '13 at 22:40
  • With the plugin also ? – Preview Dec 03 '13 at 00:06
  • 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. – Michael Dec 08 '13 at 14:31
  • Maybe you can have a look to [this link](http://stackoverflow.com/questions/5206811/hide-iphone-address-bar-with-100-height) – Preview Dec 08 '13 at 20:51
1

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

}
Christina
  • 34,296
  • 17
  • 83
  • 119
  • When I make a padding to the body isn't then a gap between the fixed header bar and the top of the screen? – Michael Dec 05 '13 at 11:42
  • No. If it were a relative positioned bar, then yes, but fixed positioned (position:fixed) bars there will not be a gap. – Christina Dec 05 '13 at 14:12
  • This does not solve the problem it only increases the height of the header. – Michael Dec 05 '13 at 16:43
  • 1
    So if you look at this: http://getbootstrap.com/examples/starter-template/ which is a fixed navbar of 50px height and top padding of 50px on the body does the navbar get covered up when you rotate your device? – Christina Dec 05 '13 at 17:07
  • Well http://getbootstrap.com/examples/starter-template/ is great. It is working as I want. How can I do that? – Michael Dec 05 '13 at 17:10
  • You *may* need to share your website url and the css. What they have done is they have a specific height of the bar that sticks to to the top, that is 50px high. The bar itself containing the brand and the navigation is position:fixed. The body of the page has a top padding of 50px. – Christina Dec 05 '13 at 17:14
  • Here is the sample I am using: http://mobilegwt.appspot.com/showcase/ Could you fix that? – Michael Dec 05 '13 at 17:15
  • Very odd site. You'll need to adjust the css. The #nav appears to be positioned absolutely and it does different things based on the user's orientation, so you will need to strip out their code or over-ride them. You'll likely need to get help from whoever coded that. It adds classes like: body.landscape > div#nav.landscapeonly, so it's no wonder it's very odd for you. Sorry I can't be of more help. – Christina Dec 05 '13 at 17:29
  • I have set the first div to fixed but when I switch my phone to landscape and the browser address bar occured then the Header switches down. But, I cannot tap any header buttons the header seems to be unreachable. Do you have any idea? – Michael Dec 05 '13 at 22:00
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42613/discussion-between-christina-arasmo-beymer-and-confile) – Christina Dec 05 '13 at 22:11
1

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

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

This is the source.

Community
  • 1
  • 1
donkey
  • 4,285
  • 7
  • 42
  • 68
  • 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. – Michael Dec 08 '13 at 14:29