Hide the iPhone status bar in a web application?

Question

Is there a way to disable the status bar in iPhone web apps? I'm working on something that requires a fixed, fullscreen view, and the status bar is rather annoying.

Answer 1

This is not possible.

Answer 2

Unfortunatly, no. There are only two options black and black-translucent. Just note that with black-translucent part of the web frame will be partially visible under the status bar while using black actually pushes the web frame down so it's height is a little smaller.

This is what Apple says in their documentation:

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

This meta tag has no effect unless you first specify full-screen mode as described in “apple-mobile-web-app-capable.”

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. The default value is default.

Answer 3

I've seen that you might have to remove the web application from your home screen, and then add it again, if you've added the meta tag, for it to make any difference. Worked for me.

Answer 4

This is, at least by now, possible. You need to add a manifest.json to your index.html:

<link rel="manifest" href="manifest.json">

In projects like Angular, React or Vue don't forget to include this file in the assets otherwise your browser will not know about this file.

You can build your manifest.json like this

{
   "name": "Your App-name",
   "short_name": "short",
   "display": "standalone",
   "orientation": "landscape",
   "start_url": "http://linkToYourSite:4200",
   "scope": "http://linkToYourSite:4200",
   "icons": [{
        "src": "assets/images/logo.png",
        "sizes": "64x64",
        "type": "image/png"
    }]
}

It is essential that the start_url and the scope are identical or the start_url is at least within the scope. If you then save your app as a Progressive Web App on your device, all pages within the scope will be displayed without a status bar.

Answer 5

The closest I could get (iOS7, I think iOS6 would show darkened status bar) shows the status bar but with a transparent background and does not push down the content of the page; so you would see the network connection time and battery percent and time at the top of your app.

meta tags:
name="apple-mobile-web-app-capable" content="yes"
name="apple-mobile-web-app-status-bar-style" content="black-translucent"

Also, to view any changes requires you to delete the app from your homescreen then add it back again.

As mentioned by andyg303:

minimal-ui might have worked on beta, but tested and doesn't work on iPhone (iOS 7.1.2 4s) or iPad (v2 7.1.2).

Answer 6

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> may be a partial solution:

https://i.stack.imgur.com/Ylhxt.png https://i.stack.imgur.com/lgGJV.png

You can see that the text on status bar can be hidden in the white background, but when you're scrolling, the text will still be there.

Answer 7

It was added in iOS 7.1

Simply add minimal-ui to the viewport meta tag, e.g:

Taken from here: https://forums.whirlpool.net.au/archive/2194915

Please note this only works for iPhone as far as I am aware, not iPad

Answer 8

<meta name="apple-mobile-web-app-capable" content="yes" />