iOS | Inconsistent Status Bar in iOS Phonegap Application

Problem : Header goes under the status bar and menu button is not clickable in Phonegap/Cordova Application.

Solution :

In the iOS version 7.0, App View covers full screen including the status bar, and the view starts from top of the screen i.e. origin(0,0); which was not the case in previous versions of iOS (In older versions, app view origin used to be (0, 20) ). Now we have to manually set the view origin in Phonegap apps to keep the status bar above main application window. In native applications, iOS has increased the height of the header to 64px as standard size including status bar which was 44px earlier and the contents of header has to be added with top margin of 20px. But the Phonegap apps do not recognize the status bar height and create view from origin(0,0). We have to change the y origin from 20 (which is the height of the status bar) and also maintain the height of view so that it also remain within the device frame and doesn’t push contents out of main frame at the bottom of the screen.

Add this code in viewWillAppear method of MainViewController.m to overcome this problem :

- (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.
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
       {  //this will check if ios version >7 
          CGRect viewBounds = [self.webView bounds]; 
          viewBounds.origin.y = 20;
          viewBounds.size.height = viewBounds.size.height - 20;
          self.webView.frame = viewBounds;
       }

    [super viewWillAppear:animated];
}

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need any software development assistance please contact us at dev@webners.com