Meta name apple-mobile-web-app-status-bar-style

Question

i tried to do a little application for myself.

i have add the meta name:

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

and this is my header code:

<div data-role="page" id="p1">
    <div data-role="header" data-theme="a" data-position="fixed"  data-id="footer">                
    </div>

when i add the shortcut icon and open the app my header is under the status bar

what is the problem?

Answer 1

"If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar."

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Try default or black .