title: iPhone Address Bar blocks HTML Page Header Buttons?
body: <p>I have a mobile website with two header buttons. In portrait mode on iPhone it works fine. I can push the buttons.</p>
  <p>Here is the problem:</p>
  <p>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.</p>
  <p>The images show the problem:</p>
  <p><img src="https://i.stack.imgur.com/Pfh9k.jpg" alt="enter image description here" /></p>
  <p>After pushing one button you see this:</p>
  <p><img src="https://i.stack.imgur.com/cSVKo.jpg" alt="enter image description here" /></p>
  <p><strong>How can I prevent this problem?</strong></p>
  <p><strong>Is there a way to detect i the iPhone browser bar is shown to the user?</strong></p>
  <p>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.</p>
  <p>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.</p>
  <p><strong>Edit: Here is a sample project which I use: <a href="http://mobilegwt.appspot.com/showcase/" rel="nofollow noreferrer">http://mobilegwt.appspot.com/showcase/</a> You can try this on an iPhone and see the effect I showed in the images.</strong></p>