iPad - Safari status bar covers part of web page with apple-mobile-web-app-capable set to true

Question

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.

Answer 1

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;
}

Answer 2

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