How do I hide the status bar completely in an iOS 7 web app?

Question

I'm building a single page JavaScript/PHP web app that currently hides the url bar and stays in full screen successfully with the following code:

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

What I need to do now is hide the actual status bar. I've tried the following meta tags to no avail:

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

Is there some other meta tag or JavaScript/PHP code I could use to hide the status bar completely? I noticed that the Belly Card iPad mini web app (www.bellycard.com) does this successfully and I'm not sure how. Any insight is genuinely appreciated.

Cheers!

Solution

There is no direct method for this (see: similar question) but... this link seems promising:

• Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7

---

The summary of the link is as below:

Key Comments (at link):

When viewing sites in Safari you do not have the ability to customize the status bar in any way. Previous versions of iOS offered the ability to view sites in full screen mode, but that was removed in iOS7, see
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.

---

Key Notes (in link):

StatusBar Cordova Plugin

With iOS7 Apple introduced some native Objective C APIs to control the status bar. Because of Cordova, we have the ability to bridge these native APIs directly into JavaScript APIs.
Luckily for us @shazron has already done this with the StatusBar plugin.

After adding the plugin to your application, you are given a StatusBar object with a number of methods to manipulate the status bar in JavaScript directly.
...
You can hide the status bar using StatusBar.hide(), or even change its background color with StatusBar.backgroundColorByName() or StatusBar.backgroundColorByHexString().
For example, the following sets the status bar to green.

<script>      
    document.addEventListener('deviceready', function() {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName('green');
    }, false);
</script>

...
Outstanding Issues

While the web has come up with workarounds for most of the iOS7 status bar issues, there are still a few that remain unresolved.

• The status bar still overlays content displayed in a cordova InAppBrowser. There is no known workaround, but a fix is slated for cordova 3.2.
• The StatusBar plugin does not work in apps that lock the device into landscape mode.

---

Key Critic Comment (at link):

These solutions seem to be working only for Phonegap applications, for us who don't use this and simply wrap our apps in a webview it seems the only easy solution is to set the webview's top property to 20 instead of zero and that takes care of the issue at hand.