Worklight 6.0的App在iOS7中状态栏错位的解决方法

Worklight 6.0的App在iOS6下正常，是这样的

：

由于iOS7开始，苹果把系统状态栏和程序导航栏融合了，目的是为了App能够更大灵活的设计UI达到更好的融合效果，但如果是某些旧代码或旧框架就会出现状态栏错位的情况，如下：

以上问题出现在Worklight 6.0和6.0.0.1，如何解决这个界面问题呢，在IBM还没有对Worklight产品升级之前，需要我们手动解决，笔者项目中使用了方法一，主要是快速解决问题完成原型演示；方法二是IBM开发团队给出的解决方法，估计未来会整合进Worklingt新版本中去。

方法一：

用原生代码里CDVMainViewController.m加了一行代码动态调整了webView容器的高，顶点20开始，留出20给状态栏。注意加是否是iOS7系统的判断，ios6以下不要空20.  这个是临时的方法，针对worklight 6.0及其以下版本，也就是IBM自己在worklight内部还没有做修改的情况，至于worklight 6.x有没有修复要测试。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
    self.view.backgroundColor = [UIColor colorWithRed:236.0/255.0 green:12.0/255.0 blue:12.0/255.0 alpha:1.0]; //[UIColor blackColor];
    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) {
        self.view.backgroundColor = [UIColor colorWithRed:236.0/255.0 green:12.0/255.0 blue:12.0/255.0 alpha:1.0];
    }
}

- (void)viewWillAppear:(BOOL)animated
{
    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) {
        self.webView.frame = CGRectMake(self.webView.frame.origin.x,
                                        20,
                                        self.webView.frame.size.width,
                                        self.webView.frame.size.height);
    }
}

效果如下：

方法二：

1. Add the following css rules: 
.wl_ios7 .ui-mobile [data-role=page], .wl_ios7 .ui-mobile [data-role=dialog], .wl_ios7 .ui-page { 
        top: 20px; 
} 

2. 
- For JQM < 1.3, add the following Javascript code in wlCommonInit function: 
        if(device.platform.toLowerCase() == 'ios' && parseFloat(device.version) >= 7) { 
                var _resetActivePageHeight = function() { 
                        var aPage = jQuery( "." + jQuery.mobile.activePageClass ), 
                        aPagePadT = parseFloat( aPage.css( "padding-top" ) ), 
                        aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ), 
                        aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ), 
                        aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) ), 
                        screenHeight = window.innerHeight || jQuery( window ).height(); 
                        
                        var height = screenHeight - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB - 20; 
                        aPage.css( "min-height", height); 
            }; 
            _resetActivePageHeight(); 
            
            jQuery( document ).on( "pageshow", _resetActivePageHeight ); 
            jQuery( window ).on( "throttledresize", _resetActivePageHeight ); 
            } 
- For JQM > 1.3, add the following Javascript code in wlCommonInit function: 
        if(device.platform.toLowerCase() == 'ios' && parseFloat(device.version) >= 7) { 
                var _resetActivePageHeight = jQuery.mobile.resetActivePageHeight; 
                jQuery.mobile.resetActivePageHeight = function resetActivePageHeight(height) { 
                _resetActivePageHeight(height); 
                var aPage = jQuery( "." + jQuery.mobile.activePageClass ); 
                aPage.css('min-height', parseFloat(aPage.css('min-height')) - 20); 
        }; 
        
        jQuery.mobile.resetActivePageHeight(); 
        jQuery( document ).on( "pageshow", jQuery.mobile.resetActivePageHeight ); 
        jQuery( window ).on( "throttledresize", jQuery.mobile.resetActivePageHeight );     
}