Question

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?

Answer 1

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 to black, the status bar has a black background. If set to black-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 to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

A couple of caveats:

1. 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).

2. 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.