首页 > 代码库 > PhoneGap 兼容IOS上移20px
PhoneGap 兼容IOS上移20px
引自:http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap
情景:在ios7下PhoneGap app会上移20px从而被状态栏挡住,查找了些方法后可以解决这问题,但是拍照完返回界面后仍然会出现上移20px的情况,参考了链接后,最终解决方法如下:
in AppDelegate.m //兼容启动页上移20px
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions{ CGRect screenBounds = [[UIScreen mainScreen] bounds];#if __has_feature(objc_arc) self.window = [[UIWindow alloc] initWithFrame:screenBounds];#else self.window = [[[UIWindow alloc] initWithFrame:screenBounds] autorelease];#endif self.window.autoresizesSubviews = YES;#if __has_feature(objc_arc) self.viewController = [[MainViewController alloc] init];#else self.viewController = [[[MainViewController alloc] init] autorelease];#endif self.viewController.useSplashScreen = YES; // Set your app‘s start page by setting the <content src=http://www.mamicode.com/‘foo.html‘ /> tag in config.xml.>// If necessary, uncomment the line below to override it. // self.viewController.startPage = @"index.html"; // NOTE: To customize the view‘s frame size (which defaults to full screen), override // [self.viewController viewWillAppear:] in your view controller. self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { [application setStatusBarStyle:UIStatusBarStyleLightContent]; self.window.clipsToBounds = YES; self.window.frame = CGRectMake(0, 20, self.window.frame.size.width, self.window.frame.size.height-20); } return YES;}
In MainViewController.h:
@interface MainViewController : CDVViewController@property (atomic) BOOL viewSizeChanged;@end
In 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 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) { CGRect viewBounds = [self.webView bounds]; if (viewBounds.origin.y == 0 && self.viewSizeChanged) { 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):
1 if (window.device && parseFloat(window.device.version) >= 7) { 2 $(window).on(‘orientationchange‘, function () { 3 var orientation = parseInt(window.orientation, 10); 4 // We now the width of the device is 320px for all iphones 5 // Default height for landscape (remove the 20px statusbar) 6 var height = 300; 7 // Default width for portrait 8 var width = 320; 9 if (orientation !== -90 && orientation !== 90 ) {10 // Portrait height is that of the document minus the 20px of11 // the statusbar12 height = document.documentElement.clientHeight - 20;13 } else {14 // This one I found experimenting. It seems the clientHeight15 // property is wrongly set (or I misunderstood how it was16 // supposed to work).17 // Dunno if it‘s specific to my setup.18 width = document.documentElement.clientHeight + 20;19 }20 document.querySelector(‘meta[name=viewport]‘)21 .setAttribute(‘content‘,22 ‘width=‘ + width + ‘,‘ +23 ‘height=‘ + height + ‘,‘ +24 ‘initial-scale=1.0,maximum-scale=1.0,user-scalable=no‘);25 })26 .trigger(‘orientationchange‘);27 }
Here is the viewport I use for other versions:
1 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
测试结果:完美解决。
PhoneGap 兼容IOS上移20px
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。