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=‘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 of
11         // the statusbar
12         height = document.documentElement.clientHeight - 20;
13       } else {
14         // This one I found experimenting. It seems the clientHeight
15         // property is wrongly set (or I misunderstood how it was
16         // 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" />

测试结果：完美解决。