如何在iOS 7 Web应用程序中完全隐藏状态栏？

Question

我正在构建一个单页JavaScript/PHP Web应用程序,该应用程序当前隐藏了url栏并使用以下代码成功保持全屏:

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

我现在需要做的是隐藏实际的状态栏.我尝试了以下元标记无济于事:

<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">

是否有一些其他元标记或JavaScript/PHP代码可以用来完全隐藏状态栏？我注意到Belly Card iPad mini网络应用程序(www.bellycard.com)成功完成了这项工作,我不确定如何.任何见解都是真正的赞赏.

干杯!

Answer 1

没有直接的方法(参见:类似的问题),但......这个链接看起来很有希望:

• 混合Web应用程序需要了解iOS7中的状态栏

链接摘要如下:

主要评论(链接):

在Safari中查看网站时,您无法以任何方式自定义状态栏.以前版本的iOS提供了以全屏模式查看网站的功能,但在iOS7中已删除,请参阅
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.

主要说明(链接):

StatusBar Cordova插件

iOS7 Apple引入了一些原生Objective C API来控制状态栏.由于Cordova,我们能够将这些本机API直接桥接到JavaScript API中.
幸运的是@shazron已经使用StatusBar插件完成了这项工作.

将插件添加到应用程序后,您将获得一个StatusBar对象,其中包含许多方法来直接操作JavaScript中的状态栏.
...
您可以使用StatusBar.hide()隐藏状态栏,甚至可以使用StatusBar.backgroundColorByName()或StatusBar.backgroundColorByHexString()更改其背景颜色.
例如,以下设置将状态栏设置为绿色.

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

......
杰出的问题

虽然网络已经提出了大多数iOS7状态栏问题的解决方法,但仍有一些仍未解决.

• 状态栏仍覆盖cordova InAppBrowser中显示的内容.没有已知的解决方法,但是针对cordova 3.2进行了修复.
• StatusBar插件在将设备锁定为横向模式的应用程序中不起作用.

主要评论家评论(链接):

这些解决方案似乎只适用于Phonegap应用程序,对于那些不使用它的人,只需将我们的应用程序包装在webview中,似乎唯一简单的解决方案是将webview的top属性设置为20而不是零,并且需要处理手头的问题.