1

A web page using the following two meta tags to allow fullscreen on iPad:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

The problem is now, that the status bar of the browser covers the header of the web page. How can this be avoided? The status bar is transparent, but that is not the solution, there are some links in the header of the web page, which can no longer be clicked.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
user1093554
  • 109
  • 1
  • 8

2 Answers2

0

With content set to "black-translucent", the status bar will be slightly transparent and lay over the top of the web app. If you have text at the top, you probably don't want this option.

Try this instead:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Or this:

<meta name="apple-mobile-web-app-status-bar-style" content="default">
dfw
  • 31
  • 2
  • 4
  • It doesn't seem to make a difference, even with _black_ or _default_, the header still hides parts of the web app. – user1093554 Jan 29 '13 at 10:25
-2

Try adding a 20-pixel margin on the top of the body (or whatever element contains the stuff you want to appear below the status bar). The status bar is 20 pixels tall.

body {
    margin-top: 20px;
}

Set the background color of html to set the background of the status bar:

html {
    background: #778899;
}
Dull Bananas
  • 892
  • 7
  • 29