iOS 7状态栏重叠UI - 需要Cordova 3.0的解决方案

Question

我有一个PhoneGap / Cordova 3.0 应用。状态栏与iOS7中的UI重叠。我已经阅读了很多答案，说使用margin-top：20px或自定义StatusBar插件。问题是，对于margin-top，当我有一个焦点文本输入时，它会向上推动所有视图（这是预期的），当它失去焦点时，视图保持在顶部并忽略边距20px值。 / p>

StatusBar插件需要Cordova 3.1，我想使用3.0版本，因此插件解决方案不适合我的特定应用程序。

是否有解决方案来解决Cordova 3.0中的状态栏重叠问题？

我希望状态栏为有效（未隐藏）。我使用AppBuilder开发Windows。

Answer 1

如果您不想隐藏状态栏 check this solution

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}


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

OR 隐藏状态栏

在xcode中打开项目首先选择状态栏样式下的复选框（在应用程序启动期间隐藏） - xcode中的常规项目设置

选择projectname-info.plist（xcode中的Resources部分）

并添加键＆＃34;查看基于控制器的状态栏外观＆＃34;和价值＆＃34; NO＆＃34;

Answer 2

这很容易。试试这个。

在MainViewController @implementation之后和@end之前，将此代码放在MainViewController.m中。

- (void)viewDidLayoutSubviews{

    if ([self respondsToSelector:@selector(topLayoutGuide)]) // iOS 7 or above
    {
        CGFloat top = self.topLayoutGuide.length;
        if(self.webView.frame.origin.y == 0){
            // We only want to do this once, or if the view has somehow been "restored" by other code.
            self.webView.frame = CGRectMake(self.webView.frame.origin.x, self.webView.frame.origin.y + top, self.webView.frame.size.width, self.webView.frame.size.height - top);
        }
    }
}

Answer 3

关于失去焦点，

var currentIosVersion = getCurrentIosVersion();//RETURNS IOS VERSION OF THE DEVICE

if(currentIosVersion == "7")
{

    /* if there is status bar then replace 768  by 748 
       Presence of status bar in our project can be detected via Cordova plugin
    */

    var content="width=device-width, height=768, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi";
    document.getElementsByName('viewport')[0].content = content;

}

Answer 4

您可以在config.xml

添加此行

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

Answer 5

如果有人在Cordova 4中遇到同样的问题，它对我有用的是安装StatusBar插件：

然后将下一个代码添加到应用程序中（在main函数内部）：

StatusBar.overlaysWebView(false); 

为了个性化颜色，我还添加了这个：

StatusBar.backgroundColorByHexString("#1b75bc");

您可以找到文档here