iOS 7状态栏与Phonegap

在iOS 7中,Phonegap应用程序将出现在状态栏下方。 这可能会使点击已经放置在屏幕顶部的button/菜单变得很困难。

有没有人知道在Phonegap应用程序中的iOS 7上解决这个状态栏问题的方法?

我试图用CSS来抵消整个网页,但它似乎不工作。 有没有办法像偏移整个UIWebView或只是使状态栏像在iOS6中的行为?

谢谢

我在另一个线程上find了答案,但我会回答这个问题,以防别人想知道。

只需用下面的代码replaceMainViewController.mviewWillAppear

 - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (eg 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]; } 

除了路德维希·克里斯托弗森(Ludwig Kristoffersson)的resize修正之外,我build议更改状态栏颜色:

 - (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; } 

请安装该插件的电话: https ://build.phonegap.com/plugins/505

并使用下面的正确设置来控制webview的覆盖:

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

对于我来说,Phonegap 3.3.0的工作。

更多的信息,在Github项目页面上: https : //github.com/phonegap-build/StatusBarPlugin

要隐藏状态栏,请将以下代码添加到MainViewController.m文件中的函数-(void)viewDidUnload

 - (BOOL)prefersStatusBarHidden { return YES; } 

回答https://stackoverflow.com/a/19249775/1502287为我工作,但我不得不改变一下,使其与相机插件(和潜在的其他人)和视口meta标签与“高=设备; -高度“(不设置高度部分会导致键盘出现在我的情况,在视图中隐藏一些input)。

每次打开相机视图并返回到您的应用程序,viewWillAppear方法将被调用,并且您的视图将缩小20px。

此外,视口的设备高度将包含20个额外的像素,呈现内容可滚动,比webview高20px。

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

在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 (eg 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" /> 

现在一切正常。

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

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

这对我没有任何问题。

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

这里有很好的文档logging,包括状态栏如何恢复到iOS7之前的状态。

要安装插件,请运行:

 cordova plugin add org.apache.cordova.statusbar 

然后将其添加到config.xml

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

我解决了我的问题,通过安装org.apache.cordova.statusbar并添加我的顶部config.xml

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

这些configuration仅适用于iOS 7+

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

请参阅新的Cordova StatusBar插件来解决这个问题。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项#3

如果检测到iOS7,我使用下面的一段代码来添加一个类到主体。 然后,我的风格,以在我的容器顶部添加一个20px边距。 确保你已经安装了“device”插件,并且这个代码在“deviceready”事件中。

从阅读的angular度来看,我听说Phonegap(3.1我相信)的下一次更新将更好地支持对iOS7状态栏的更改。 所以这可能只是作为一个短期的修复需要。

 if(window.device && parseFloat(window.device.version) >= 7){ document.body.classList.add('fix-status-bar'); } 

路德维希的答案为我工作。

对于任何人使用他的答案,现在正在寻找改变白色边缘的颜色(可能看起来微不足道,但让我难倒),看到这个:

滑下UIWebView以修正iOS7状态栏覆盖问题后,如何更改UIWebView背景颜色?

另一种方式是向后兼容 。 根据iOS 7制作HTML(顶部额外有20px的余量),以便在iOS < 7.0 full screen外观并减less额外的余量。 像MainViewController.m的以下内容:

 - (void)viewDidLoad { [super viewDidLoad]; if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0) { CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = -20; viewBounds.size.height = viewBounds.size.height + 20; self.webView.frame = viewBounds; } } 

这个解决scheme不会在iOS 7.0及更高iOS 7.0上留下黑屏,现代iOS用户会发现奇怪的和古老的

didFinishLaunchingWithOptions事件的AppDelegate.m中写入以下代码(恰好在其最后一行代码“ return YES; ”之前):

 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; } 

我会等待您的反馈! 🙂

如果我们使用相机插件的图片库,状态栏将回来,以解决这个问题,请添加此行

  [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; 

 - (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...} 

在插件列表中的CVDCamera.m里面

在启动时在didFinishLaunchingWithOptions事件的AppDelegate.m中写入以下代码。

CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Fixing status bar ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7 or above CGRect newWebViewBounds = CGRectMake( 0, 20, screenBounds.size.width, screenBounds.size.height-20 ); screenBounds = newWebViewBounds; } // ------------------------------- Fixing status bar End

并修复以上iOS 7及以上。

要使状态栏保持纵向可见,但将其隐藏在横向(即全屏)中,请尝试以下操作:

MainViewController.h

 @interface MainViewController : CDVViewController @property (atomic) NSInteger landscapeOriginalSize; @property (atomic) NSInteger portraitOriginalSize; @end 

MainViewController.m

 @implementation MainViewController @synthesize landscapeOriginalSize; @synthesize portraitOriginalSize; ... - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (eg webView), // you can do so here. [super viewWillAppear:animated]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil]; } - (void)orientationChanged:(NSNotification *)notification { [self adjustViewsForOrientation:[[UIApplication sharedApplication] statusBarOrientation]]; } - (void)viewDidDisappear:(BOOL)animated { [[NSNotificationCenter defaultCenter]removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil]; } - (void) adjustViewsForOrientation:(UIInterfaceOrientation) orientation { if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame; CGRect frame = self.webView.frame; switch (orientation) { case UIInterfaceOrientationPortrait: case UIInterfaceOrientationPortraitUpsideDown: { if (self.portraitOriginalSize == 0) { self.portraitOriginalSize = frame.size.height; self.landscapeOriginalSize = frame.size.width; } frame.origin.y = statusBarFrame.size.height; frame.size.height = self.portraitOriginalSize - statusBarFrame.size.height; } break; case UIInterfaceOrientationLandscapeLeft: case UIInterfaceOrientationLandscapeRight: { if (self.landscapeOriginalSize == 0) { self.landscapeOriginalSize = frame.size.height; self.portraitOriginalSize = frame.size.width; } frame.origin.y = 0; frame.size.height = self.landscapeOriginalSize; } break; case UIInterfaceOrientationUnknown: break; } self.webView.frame = frame; } } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. // Change this color value to change the status bar color: self.view.backgroundColor = [UIColor colorWithRed:0/255.0f green:161/255.0f blue:215/255.0f alpha:1.0f]; } 

这是我在这个和链接StackOverflow讨论,从Cordova的StatusBar插件的一些代码(以便不硬编码的20px值)和一些咒语(我不是一个iOS的开发我摸索着这个解决scheme)。

首先,在你的项目中添加设备插件。 插件ID是:org.apache.cordova.device和存储库是: https : //github.com/apache/cordova-plugin-device.git

之后,使用此function,并在每个页面或屏幕上调用它:

 function mytopmargin() { console.log("PLATform>>>" + device.platform); if (device.platform === 'iOS') { $("div[data-role='header']").css("padding-top", "21px"); $("div[data-role='main']").css("padding-top", "21px"); } else { console.log("android"); } } 

控制状态栏背景的最佳方法 – 2017

经过无奈之后,在互联网上进行大量的search,这些是你需要采取的步骤:

  1. 确保您使用状态栏插件
  2. 将此设置添加到您的config.xml中:

<preference name =“StatusBarOverlaysWebView”value =“false”/>

  1. onDeviceReady上使用下面的代码

      StatusBar.show(); StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString('#209dc2'); 

它适用于iOS和Android。

祝你好运!