为什么我的Phonegap应用程序覆盖了移动设备的状态栏？

Question

我正在开发一个phonegap应用程序，无论出于何种原因该应用程序覆盖状态栏，我需要确保不会发生这种情况。以下图片是我在iphone上模拟应用程序的时候：

以下是代码片段：

<div data-role="header" data-position="fixed" class="header">
  <a href="#all_phases"><span class="ui-icon ui-icon-flat-menu"></span></a>
  <a href="#settings"><span class="ui-icon ui-icon-flat-settings"></span></a>
    <h1>My first page</h1>
      </div>
        <div data-role="main" class="ui-content" id="question_1">
          <div class="question"><h4>When is the last time you talked to your           ex?</h4></div>
            <div class="options">
                <a href="#phase1a" data-transition="none"><div class="answer">   <p>Less than a week</p></div></a>
                <a href="#phase1b" data-transition="none"><div class="answer"><p>1 to 3 weeks</p></div></a>
                <a href="#phase1c" data-transition="none"><div class="answer"><p>Several months or more</p></div></a>
            </div>
        </div>
        <div data-role="footer" data-position="fixed" class="footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#phase2" data-transition="none">Next</a></li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

我在我的cordova iOS应用程序上的状态栏遇到了同样的问题。 查看官方的cordova状态栏插件。它解决了我的问题。

安装插件

https://github.com/apache/cordova-plugin-statusbar

您正在寻找的是

<preference name="StatusBarOverlaysWebView" value="false" />

将其添加到config.xml

编辑：该插件还允许您以您想要的方式为状态栏的背景和文本着色，这非常简洁。

Answer 2

您有三种方法可以解决它：

1。隐藏Plist属性中的状态栏。

2。在应用启动时隐藏状态栏

[[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:NO];

3。检测iOS时是否进行填充

// Pre-requisites:
// 1. Device core plugin
// 2. Splashscreen core plugin (3.1.0)
// 3. config.xml:  <preference name="AutoHideSplashScreen" value="false" />
// 4. config.xml:  <preference name="DisallowOverscroll" value="true" />

function onDeviceReady() {
    if (parseFloat(window.device.version) >= 7.0) {
          document.body.style.marginTop = "20px";
          // OR do whatever layout you need here, to expand a navigation bar etc
    }
    navigator.splashscreen.hide();
}


document.addEventListener('deviceready', onDeviceReady, false);

Answer 3

输入

为您的应用添加cordova状态栏插件

cordova plugin add cordova-plugin-statusbar

然后在您的config.xml中，在iOS平台部分中，添加两个<preference...>标记，如下所示：

<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>