在 iOS 7 中，Phonegap 应用程序将出现在状态栏下方。这会使点击屏幕顶部的按钮/菜单变得困难。
是否有人知道如何在 Phonegap 应用程序中修复 iOS 7 上的此状态栏问题？
我试图用 CSS 来抵消整个网页，但它似乎不起作用。有没有办法像偏移整个 UIWebView 或者只是让状态栏的行为像在 iOS6 中一样？
谢谢
我在另一个线程上找到了答案，但如果其他人想知道，我会回答这个问题。
只需将 MainViewController.m 中的 viewWillAppear 替换为：
- (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];
}
除了 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;
}
请为 phonegap 安装该插件：https://build.phonegap.com/plugins/505
并使用如下正确设置来控制 webview 的覆盖：
<preference name="StatusBarOverlaysWebView" value="false" />
对我来说，使用 Phonegap 3.3.0 就可以了。
更多信息，在 Github 项目页面上：https://github.com/phonegap-build/StatusBarPlugin
要隐藏状态栏，请在函数 -(void)viewDidUnload 下的文件 MainViewController.m 中添加以下代码
- (BOOL)prefersStatusBarHidden
{
return YES;
}
答案 https://stackoverflow.com/a/19249775/1502287 对我有用，但我必须对其进行一些更改以使其与相机插件（可能还有其他插件）和带有“height = device-height”的视口元标记一起使用（不设置高度部分会导致在我的情况下，键盘出现在视图上，沿途隐藏了一些输入）。
每次您打开相机视图并返回您的应用程序时，都会调用 viewWillAppear 方法，并且您的视图会缩小 20px。
此外，视口的设备高度将包括额外的 20 像素，使内容可滚动并且比 web 视图高 20 像素。
这是相机问题的完整解决方案：
在 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).
// I don't know if it is 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 文件并添加密钥
view controller-based status bar appearance: NO
status bar is initially hidden : YES
这对我来说没有问题。
对于 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" />
我通过安装 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/
如果检测到 iOS7，我使用以下代码向主体添加一个类。然后我设置该类的样式以在容器顶部添加 20px 边距。确保您已安装“设备”插件，并且此代码位于“设备就绪”事件中。
通过阅读，我听说 Phonegap 的下一次更新（我相信是 3.1）将更好地支持对 iOS7 状态栏的更改。因此，这可能只是需要作为短期修复。
if(window.device && parseFloat(window.device.version) >= 7){
document.body.classList.add('fix-status-bar');
}
另一种方法是向后兼容。根据 iOS 7 制作 HTML（顶部有 20 像素的额外边距）以赋予 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 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 (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 值）以及我的一些咒语（我不是 iOS 开发人员所以我摸索到了这个解决方案）。
首先，在您的项目中添加设备插件。插件 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");
}
}
控制状态栏背景的最佳方式 - 2017
经过不断的挫折，在互联网上进行了大量搜索，这些是您需要采取的步骤：
确保您使用状态栏插件将此设置添加到您的 config.xml：
在 onDeviceReady StatusBar.show() 上使用以下代码； StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString('#209dc2');
它适用于 iOS 和 Android。
祝你好运！
