Menu
What does
<meta name="apple-mobile-web-app-status-bar-style" content="black"> do -- can someone explain with an example?
I found this line in the official Safari Developer Library
This meta tag has no effect unless you first specify full-screen mode as described in “url.”
But which url?
What is the benefit of this meta tag?
584
Chrome on Android now supports a meta-tag mobile-web-app-capable : Since Chrome M31, you can set up your web app to have an application shortcut icon added to a device's homescreen, and have the app launch in full-screen "app mode" using Chrome for Android's "Add to homescreen" menu item.
@learner Goto info. plist and then select any row. You will see a + sign. Click on Plus sign and from drop down, you should see Status bar style Option.
What the meta tag do is when you view your page in the browser, it adds an option to add your page to the homescreen. When you open your page via the homescreen shortcut, it will be in fullscreen and navigator. standalone will be set to true. This is what people refer to when they speak of the fullscreen mode.
First, the apple-mobile-web-app-capable hint has to be set for that to even work. This hint causes a web application to run in full-screen mode: it removes the address bar and navigation buttons you get by default in Mobile Safari. The removed areas are highlighted in red here:
So, once an app is in full-screen mode (i.e. the user has added the website to their home page), you can also control the colour of the remaining thin status bar at the top of the page with apple-mobile-web-app-status-bar-style, highlighted in red here:
Per the docs:
If content is set to
default, the status bar appears normal. If set toblack, the status bar has a black background. If set toblack-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set toblack-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
A couple of caveats:
This only works on the first page you load; any navigation away to another page will make the address bar and navigation buttons reappear. So if you want this to work, you have to build a single page website (for multiple 'pages' consider an Ajax page loading approach such as that used in the jQuery Mobile framework).
This only works when you arrive at the web page via an application shortcut icon; if you navigate to the website directly from within Mobile Safari it has no effect.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
