如何在 iOS 7 Web 应用程序中完全隐藏状态栏？ [复制]答案

【问题标题】：How do I hide the status bar completely in an iOS 7 web app? [duplicate]如何在 iOS 7 Web 应用程序中完全隐藏状态栏？ [复制]
【发布时间】：2014-01-30 07:22:07
【问题描述】：

我正在构建一个单页 JavaScript/PHP 网络应用程序，该应用程序当前隐藏 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) 成功地做到了这一点，但我不确定如何。任何见解都非常感谢。

干杯！

【问题讨论】：

不能再这样了。在此处发布：stackoverflow.com/questions/18813476/…

标签： javascript php html ios web-applications

【解决方案1】：

没有直接的方法（see: similar question）但是...这个链接看起来很有希望：

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

链接摘要如下：

关键评论（链接处）：

在 Safari 中查看网站时，您无法自定义状态栏以任何方式。以前的 iOS 版本提供以全屏模式查看网站的能力，但在 iOS7，见
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review。

主要说明（在链接中）：

StatusBar Cordova 插件

Apple 在 iOS7 中引入了一些原生的 Objective C API 来控制状态栏。由于 Cordova，我们有能力弥合这些将原生 API 直接转换为 JavaScript API。
幸运的是，@shazron 已经用 StatusBar plugin 做到了这一点。

将插件添加到您的应用程序后，您将获得一个状态栏具有多种方法来操作状态栏的对象直接使用 JavaScript。
...
您可以使用 StatusBar.hide() 隐藏状态栏，甚至可以更改其背景颜色与 StatusBar.backgroundColorByName() 或 StatusBar.backgroundColorByHexString().
例如，下面将状态栏设置为绿色。
<script>      
    document.addEventListener('deviceready', function() {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName('green');
    }, false);
</script>
...
未决问题

虽然网络已经为大多数 iOS7 状态提供了解决方法酒吧问题，还有一些没有解决。

状态栏仍然覆盖在cordova InAppBrowser 中显示的内容。没有已知的解决方法，但解决方法是 slated for cordova 3.2。

StatusBar 插件在将设备锁定为横向模式的应用中不起作用。

关键评论评论（链接）：

这些解决方案似乎只适用于 Phonegap 应用程序，因为我们这些不使用它并只是将我们的应用程序包装在 webview 中的人唯一简单的解决方案是将 webview 的 top 属性设置为 20 而不是零，这可以解决手头的问题。

【讨论】：