Iphone Web App is under Status Bar

Question

Hi I have a problem with iPhone web app. The problem is that the website is moves under the statusbar when I add the app to to the home screen.

So for example my header block is not fully shown.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

Here is the image showing the problem.

Answer 1

Try to change:

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

into:

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

I had the same problem where this was set to black-translucent and setting it to black removed the problem.