带有Phonegap的iOS 7状态栏

Question

在iOS 7中,Phonegap应用程序将显示在状态栏下方.这可能使单击放置在屏幕顶部的按钮/菜单变得困难.

是否有人知道如何在Phonegap应用程序中修复iOS 7上的状态栏问题？

我试图用CSS抵消整个网页,但似乎没有用.有没有办法喜欢偏移整个UIWebView或只是让状态栏的行为像在iOS6中一样？

谢谢

Answer 1

我在另一个帖子上找到了答案,但我会回答这个问题以防其他人想知道.

只需用以下内容替换viewWillAppearin MainViewController.m:

- (void)viewWillAppear:(BOOL)animated {
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

Answer 2

除了Ludwig Kristoffersson的调整大小,我建议更改状态栏颜色:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    self.view.backgroundColor = [UIColor blackColor];
}
-(UIStatusBarStyle)preferredStatusBarStyle{
    return UIStatusBarStyleLightContent;
}

Answer 3

请为phonegap安装该插件:https://build.phonegap.com/plugins/505

并使用如下所示的正确设置来控制webview的叠加层:

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

对我来说,使用Phonegap 3.3.0可行.

更多信息,请访问Github项目页面:https: //github.com/phonegap-build/StatusBarPlugin

Answer 4

要隐藏状态栏,请MainViewController.m在该功能下的文件中添加以下代码-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Answer 5

回答/sf/answers/1347484281/对我有用,但我不得不改变它以使其适用于相机插件(以及可能的其他)和带有"height = device-的视口元标记"高度"(不设置高度部分会导致键盘在我的情况下出现在视图上,沿途隐藏一些输入).

每次打开摄像机视图并返回到应用程序时,都会调用viewWillAppear方法,并且您的视图将缩小20px.

此外,视口的设备高度将包括20个额外的px,使内容可滚动,并且比webview高20px.

以下是相机问题的完整解决方案:

在MainViewController.h中:

@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end

在MainViewController.m中:

@implementation MainViewController

@synthesize viewSizeChanged;

[...]

- (id)init
{
    self = [super init];
    if (self) {
        // On init, size has not yet been changed
        self.viewSizeChanged = NO;
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
    }
    return self;
}

[...]

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7 if not already done
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7 && !self.viewSizeChanged) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        self.viewSizeChanged = YES;
    }
    [super viewWillAppear:animated];
}

现在对于视口问题,在你的deviceready事件监听器中,添加它(使用jQuery):

if (window.device && parseFloat(window.device.version) >= 7) {
  $(window).on('orientationchange', function () {
      var orientation = parseInt(window.orientation, 10);
      // We now the width of the device is 320px for all iphones
      // Default height for landscape (remove the 20px statusbar)
      var height = 300;
      // Default width for portrait
      var width = 320;
      if (orientation !== -90 && orientation !== 90 ) {
        // Portrait height is that of the document minus the 20px of
        // the statusbar
        height = document.documentElement.clientHeight - 20;
      } else {
        // This one I found experimenting. It seems the clientHeight
        // property is wrongly set (or I misunderstood how it was
        // supposed to work).
        // Dunno if it's specific to my setup.
        width = document.documentElement.clientHeight + 20;
      }
      document.querySelector('meta[name=viewport]')
        .setAttribute('content',
          'width=' + width + ',' +
          'height=' + height + ',' +
          'initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
    })
    .trigger('orientationchange');
}

这是我用于其他版本的视口:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

一切都很好.

Answer 6

尝试(app name)-Info.plist在XCode中进入应用程序的文件并添加密钥

view controller-based status bar appearance: NO
status bar is initially hidden : YES

这对我没有问题.

Answer 7

对于Cordova 3.1+,有一个插件可以处理iOS 7+状态栏的行为变化.

这里很好地记录了这一点,包括状态栏如何恢复到iOS7之前的状态.

要安装插件,请运行:

cordova plugin add org.apache.cordova.statusbar

然后将其添加到config.xml

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

Answer 8

我通过安装org.apache.cordova.statusbar和添加我的顶部来解决我的问题config.xml:

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

这些配置仅适用于iOS 7+

参考:http: //devgirl.org/2014/07/31/phonegap-developers-guid/