在iOS 7中,Phonegap应用程序将显示在状态栏下方。这可能导致难以单击位于屏幕顶部的按钮/菜单。
是否有人知道在Phonegap应用程序中解决iOS 7上此状态栏问题的方法?
我试图用CSS抵消整个网页,但似乎无法正常工作。有没有办法喜欢偏移整个UIWebView或只是使状态栏的行为像在iOS6中一样?
谢谢
在iOS 7中,Phonegap应用程序将显示在状态栏下方。这可能导致难以单击位于屏幕顶部的按钮/菜单。
是否有人知道在Phonegap应用程序中解决iOS 7上此状态栏问题的方法?
我试图用CSS抵消整个网页,但似乎无法正常工作。有没有办法喜欢偏移整个UIWebView或只是使状态栏的行为像在iOS6中一样?
谢谢
Answers:
我在另一个线程上找到了答案,但是如果有人怀疑,我会回答这个问题。
只需将viewWillAppear
in 替换为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];
}
除了路德维希·克里斯托弗森(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
并使用如下所示的正确设置来控制网络视图的覆盖:
<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为我工作,但我必须对其进行一些更改,以使其与相机插件(可能还有其他插件)以及带有“ height = device-高度”(如果未设置高度部分,则在我的情况下,键盘将显示在视图上方,并在此过程中隐藏一些输入)。
每次您打开相机视图并返回到您的应用程序时,都会调用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).
// 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" />
现在一切正常。
尝试进入(app name)-Info.plist
XCode中的应用文件并添加密钥
view controller-based status bar appearance: NO
status bar is initially hidden : YES
这对我毫无问题。
对于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" />
我通过安装org.apache.cordova.statusbar
并添加top来解决我的问题config.xml
:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
这些配置仅适用于iOS 7+
请参阅新的Cordova StatusBar插件,该插件可解决该确切问题。 http://docs.icenium.com/troubleshooting/ios7-status-bar#solution选项#3
路德维希的答案对我有用。
对于使用他的答案并且现在想要更改白色边距颜色的任何人(可能看起来微不足道,但让我感到困惑),请参阅以下内容:
另一种方法是向后兼容。根据制作HTML iOS 7
(顶部额外留有20px的边距)以给出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开发者,我摸索了解决方案的方法)。
首先,在您的项目中添加Device插件。插件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
经过不断的挫折,在Internet上进行了大量搜索,以下是您需要采取的步骤:
<偏好名称=“ StatusBarOverlaysWebView”值=“ false” />
在onDeviceReady上使用以下代码
StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString('#209dc2');
适用于iOS和Android。
祝好运!