首页 > 代码库 > 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