带有 Phonegap 的 iOS 7 状态栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19209781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS 7 Status bar with Phonegap
提问by Luddig
In iOS 7, Phonegap applications will appear underneath the status bar. This can make it difficult to click on buttons/menus that have been placed at the top of the screen.
在 iOS 7 中，Phonegap 应用程序将出现在状态栏下方。这会使点击位于屏幕顶部的按钮/菜单变得困难。
Is there someone who knows a way to fix this status bar issue on iOS 7 in a Phonegap application?
有没有人知道如何在 Phonegap 应用程序中修复 iOS 7 上的这个状态栏问题？
I've tried to offset the entire web page with CSS but it doesn't seem to work. Is there a way to like offset the entire UIWebView or just make the status bar behave like it did in iOS6?
我试图用 CSS 抵消整个网页，但它似乎不起作用。有没有办法像偏移整个 UIWebView 或者只是让状态栏表现得像在 iOS6 中那样？
Thanks
谢谢
回答by Luddig
I found an answer on another thread, but I'll answer the question in case someone else wonders.
我在另一个线程上找到了答案，但我会回答这个问题以防其他人想知道。
Just replace the viewWillAppearin MainViewController.mwith this:
只需将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];
}
回答by Alex L
In addition to Ludwig Kristoffersson's resize fix, I recommend changing status bar color:
除了 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;
}
回答by xdemocle
please, install that plugin for phonegap: https://build.phonegap.com/plugins/505
请为 phonegap 安装该插件：https://build.phonegap.com/plugins/505
And use the correct setting like below, to control the overlay of the webview:
并使用如下正确的设置来控制 webview 的覆盖：
<preference name="StatusBarOverlaysWebView" value="false" />
For me, with Phonegap 3.3.0 it works.
对我来说，使用 Phonegap 3.3.0 就可以了。
More information, on the Github project page: https://github.com/phonegap-build/StatusBarPlugin
更多信息，在 Github 项目页面：https: //github.com/phonegap-build/StatusBarPlugin
回答by markmarijnissen
To hide statusbar, add the following code in the file MainViewController.munder the function -(void)viewDidUnload
要隐藏状态栏，请MainViewController.m在函数下的文件中添加以下代码-(void)viewDidUnload
- (BOOL)prefersStatusBarHidden
{
return YES;
}
回答by dieppe
Answer https://stackoverflow.com/a/19249775/1502287worked for me, but I had to change it a bit to make it work with the camera plugin (and potentially others) and a viewport meta tag with "height=device-height" (not setting the height part would cause the keyboard to appear over the view in my case, hiding some inputs along the way).
回答https://stackoverflow.com/a/19249775/1502287对我有用，但我不得不对其进行一些更改以使其与相机插件（以及可能的其他插件）和带有“height=device-”的视口元标记一起使用高度”（不设置高度部分会导致键盘出现在我的情况下的视图上，沿途隐藏一些输入）。
Each time you would open the camera view and go back to your app, the viewWillAppear method would be called, and your view would shrink by 20px.
每次您打开相机视图并返回到您的应用程序时，都会调用 viewWillAppear 方法，并且您的视图将缩小 20px。
Also, the device-height for the viewport would include the 20 extra px, rendering the content scrollable and 20px higher than the webview.
此外，视口的设备高度将包括 20 额外 px，呈现内容可滚动且比 webview 高 20px。
Here is the complete solution for the camera problem:
这是相机问题的完整解决方案：
In MainViewController.h:
在 MainViewController.h 中：
@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end
In MainViewController.m:
在 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];
}
Now for the viewport problem, in your deviceready event listener, add this (using jQuery):
现在对于视口问题，在您的 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');
}
Here is the viewport I use for other versions:
这是我用于其他版本的视口：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
And all works well now.
现在一切正常。
回答by track0
For Cordova 3.1+, there is a plugin that deals with the change in behaviour of the status bar for iOS 7+.
对于 Cordova 3.1+，有一个插件可以处理 iOS 7+ 状态栏的行为变化。
This is nicely documented here, including how the status bar can be reverted to its pre-iOS7 state.
这在这里有很好的记录，包括如何将状态栏恢复到 iOS7 之前的状态。
To install the plugin, run:
要安装插件，请运行：
cordova plugin add org.apache.cordova.statusbar
Then add this to config.xml
然后将其添加到 config.xml
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
回答by dk123
Try going into the app's (app name)-Info.plistfile in XCode and add the keys
尝试(app name)-Info.plist在 XCode 中进入应用程序的文件并添加密钥
view controller-based status bar appearance: NO
status bar is initially hidden : YES
This works for me without problem.
这对我来说没有问题。
回答by mayconbelfort
I solve my problem by installing the org.apache.cordova.statusbarand adding in my top config.xml:
我通过安装org.apache.cordova.statusbar并添加到我的顶部来解决我的问题config.xml：
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
These configurations only works for iOS 7+
这些配置仅适用于 iOS 7+
Reference: http://devgirl.org/2014/07/31/phonegap-developers-guid/
回答by Philippe Monnet
See the new Cordova StatusBar plugin which addresses that exact issue. http://docs.icenium.com/troubleshooting/ios7-status-bar#solutionoption #3
请参阅解决该确切问题的新 Cordova StatusBar 插件。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项 #3
回答by tipycalFlow
Another way is going backward compatible. Make the HTML according to iOS 7(with an extra 20px margin on top) to give that full screenlook and cut that extra margin off for iOS < 7.0. Something like the following in MainViewController.m:
另一种方法是向后兼容。根据iOS 7（顶部有额外的 20 像素边距）制作 HTML以提供该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;
}
}
This solution won't leave a black bar on top for iOS 7.0and above, which a modern iOS user will find odd and old.
该解决方案将不会留在顶部带有黑条为iOS 7.0以上，其中现代iOS的用户会发现奇数和老。
