在iOS 7中，Phonegap应用程序将显示在状态栏下方。这可能使您难以点击放置在屏幕顶部的按钮/菜单。
是否有人知道如何在Phonegap应用程序中修复iOS 7上的状态栏问题？
我试图用CSS来抵消整个网页，但它似乎不起作用。 有没有办法让偏移整个UIWebView或只是让状态栏的行为与在iOS6中一样？
由于
答案 0 :(得分：143)
我在另一个帖子上找到了答案，但我会回答这个问题以防万一其他人想知道。
只需将viewWillAppear中的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];
}
答案 1 :(得分：37)
除了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;
}
答案 2 :(得分：22)
请为phonegap安装该插件：https://build.phonegap.com/plugins/505
使用如下所示的正确设置来控制webview的叠加层：
<preference name="StatusBarOverlaysWebView" value="false" />
对我来说，使用Phonegap 3.3.0可以正常工作。
有关Github项目页面的更多信息： https://github.com/phonegap-build/StatusBarPlugin
答案 3 :(得分：20)
要隐藏状态栏，请在MainViewController.m函数
-(void)viewDidUnload中添加以下代码
- (BOOL)prefersStatusBarHidden
{
return YES;
}
答案 4 :(得分：15)
答案https://stackoverflow.com/a/19249775/1502287为我工作，但我不得不改变它以使其适用于相机插件（可能还有其他）和带有“height = device-height”的视口元标记（不设置）在我的情况下，高度部分会导致键盘出现在视图上，沿途隐藏一些输入。）
每次打开相机视图并返回应用程序时，都会调用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" />
现在一切顺利。
答案 5 :(得分：6)
尝试在XCode中进入应用程序的(app name)-Info.plist文件并添加密钥
view controller-based status bar appearance: NO
status bar is initially hidden : YES
这对我没有问题。
答案 6 :(得分：6)
对于Cordova 3.1+，有一个插件可以处理iOS 7 +状态栏的行为变化。
这是很好的文档here，包括状态栏如何恢复到iOS7之前的状态。
要安装插件，请运行：
cordova plugin add org.apache.cordova.statusbar
然后将其添加到config.xml
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
答案 7 :(得分：5)
我通过安装org.apache.cordova.statusbar并添加我的热门config.xml来解决我的问题：
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
这些配置仅适用于iOS 7 +
答案 8 :(得分：3)
请参阅新的Cordova StatusBar插件，该插件可解决该确切问题。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项＃3
答案 9 :(得分：1)
如果检测到iOS7，我会使用以下代码向主体添加类。然后我将该类设置为在容器顶部添加20px边距。确保安装了“device”插件，并且此代码位于“deviceready”事件中。
通过阅读，我听说Phonegap的下一次更新（我相信3.1）将更好地支持对iOS7状态栏的更改。因此，这可能仅仅需要作为短期解决方案。
if(window.device && parseFloat(window.device.version) >= 7){
document.body.classList.add('fix-status-bar');
}
答案 10 :(得分：1)
Ludwig's answer为我工作。
对于那些使用他的答案并且现在想要改变白色边缘的颜色的人（可能看起来微不足道，但让我难倒），请看这个：
答案 11 :(得分：1)
另一种方法是向后兼容。根据{{1}}制作HTML（顶部额外的20px边距），使iOS 7看起来并为full screen削减额外的边距。类似iOS < 7.0中的以下内容：
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;
}
}
及更高版本的顶部留下黑条，现代iOS用户会发现奇数且旧。
答案 12 :(得分：0)
如果我们使用图片库的相机插件，状态栏将返回以解决该问题请添加此行
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
到
- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}
插件列表中的CVDCamera.m内的函数
答案 13 :(得分：0)
将以下代码写入 didFinishLaunchingWithOptions 事件中的 AppDelegate.m 内（恰好在其最后一行代码“返回YES; ”之前）：
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
我会等你的反馈！ ：）
答案 14 :(得分：0)
在启动时，在 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及以上版本。
答案 15 :(得分：0)
要保持状态栏在纵向中可见，但将其隐藏在横向（即全屏）中，请尝试以下操作：
在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 (e.g. 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值进行硬编码），以及我的一些咒语（I＆＃39 ;我不是iOS开发人员，所以我摸索了这个解决方案。）
答案 16 :(得分：0)
首先，在项目中添加设备插件。插件ID是：org.apache.cordova.device和存储库是：https://github.com/apache/cordova-plugin-device.git
之后使用此功能并在每个页面或屏幕上调用它： -
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");
}
}
答案 17 :(得分：0)
控制状态栏背景的最佳方法 - 2017
在持续受挫之后，在互联网上进行了大量搜索，这些是您需要采取的步骤：
＆LT; preference name =“StatusBarOverlaysWebView”value =“false”/＆gt;
在 onDeviceReady
上使用以下代码 StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString('#209dc2');
它适用于iOS和iOS机器人。
祝你好运！