Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Advertising » Fixing the PhoneGap Status Bar in iOS7

Fixing the PhoneGap Status Bar in iOS7

Published on October 5th, 2013

One of the most noticeable changes in iOS7 when developing an App with PhoneGap is the new Fullscreen “feature”. xcode and Phonegap don’t appear to respect any of the status bar settings, and you are stuck adjusting the CSS or editing the core PhoneGap files to compensate. Here is how my infamous Whipped zApp looks after the update to iOS7.

2013-10-05 16.20.04

Notice the status bar issues at the top, as well as the humongous whipped images. Let’s tackle the Status Bar issue first since it most likely plagues many PhoneGap developers right now. There are numerous ways to fix this, but perhaps the most elegant if you are using PhoneGap 3.0 was suggested by Shazron from Adobe:

1
2
3
4
5
6
7
function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
  
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
  
document.addEventListener('deviceready', onDeviceReady, false);

Unfortunately, this did not work for me, since I decided not to update all the way to PhoneGap 3.0 quite yet due to the lack of good documentation forthcoming from Adobe, and a number of bugs that have been introduced with the latest major revision. In my case, I was forced to edit the MainViewController.m file as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- (void)viewWillAppear:(BOOL)animated
{
    // Set the main view to utilize the entire application frame space of the device.
    // Change this to suit your view's UI footprint needs in your application.
    
    UIView* rootView = [[[[UIApplication sharedApplication] keyWindow] rootViewController] view];
    CGRect webViewFrame = [[[rootView subviews] objectAtIndex:0] frame];  // first subview is the UIWebView
    
    if (CGRectEqualToRect(webViewFrame, CGRectZero)) { // UIWebView is sized according to its parent, here it hasn't been sized yet
        self.view.frame = [[UIScreen mainScreen] applicationFrame]; // size UIWebView's parent according to application frame, which will in turn resize the UIWebView
    }
 
    // Begin - New for iOS7
    NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
    if ([[vComp objectAtIndex:0] intValue] >= 7) {
        CGRect oldBounds = [self.view bounds];
        
        CGRect newViewBounds = CGRectMake(0, -20, oldBounds.size.width, oldBounds.size.height-20);
        CGRect newWebViewBounds = CGRectMake(0, 0, oldBounds.size.width, oldBounds.size.height-20);
 
        [self.view setBounds:newViewBounds];
        [self.webView setBounds:newWebViewBounds];
    }
    // End - New for iOS 7
    
    [super viewWillAppear:animated];
}
- (void)viewWillAppear:(BOOL)animated
{
    // Set the main view to utilize the entire application frame space of the device.
    // Change this to suit your view's UI footprint needs in your application.
    
    UIView* rootView = [[[[UIApplication sharedApplication] keyWindow] rootViewController] view];
    CGRect webViewFrame = [[[rootView subviews] objectAtIndex:0] frame];  // first subview is the UIWebView
    
    if (CGRectEqualToRect(webViewFrame, CGRectZero)) { // UIWebView is sized according to its parent, here it hasn't been sized yet
        self.view.frame = [[UIScreen mainScreen] applicationFrame]; // size UIWebView's parent according to application frame, which will in turn resize the UIWebView
    }

    // Begin - New for iOS7
    NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
    if ([[vComp objectAtIndex:0] intValue] >= 7) {
        CGRect oldBounds = [self.view bounds];
        
        CGRect newViewBounds = CGRectMake(0, -20, oldBounds.size.width, oldBounds.size.height-20);
        CGRect newWebViewBounds = CGRectMake(0, 0, oldBounds.size.width, oldBounds.size.height-20);

        [self.view setBounds:newViewBounds];
        [self.webView setBounds:newWebViewBounds];
    }
    // End - New for iOS 7
    
    [super viewWillAppear:animated];
}

Both snippets of code seek to move the view window down 20 pixels to leave space for the Status Bar.

Now all that is left is to fix my oversized images. This was simply done with some CSS. Originally the code was:

1
2
3
#buttons li a img {
  height: 90%;
}
#buttons li a img {
  height: 90%;
}

The seems to work fine in everything pre-iOS7, but I had to add another CSS parameter to make it work in iOS7 as well.

1
2
3
4
#buttons li a img {
  height: 90%;
  max-height: 90%;
}
#buttons li a img {
  height: 90%;
  max-height: 90%;
}

Not sure why it is needed honestly, but it doesn’t hurt backwards compatibility. Hope it helps someone else out!

2013-10-05 16.34.12

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl’s work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


 

4 Responses

  1. Michele

    Hi, I have a problem (sorry if it’s off topic)..I want to publish my app on Apple Store but the staff reject it to me all time šŸ™ Do you use a particular version of jQM?They say that my app is very slow..

    • This can happen for a few reasons, some of which is if you, for example, accidentally call a command to bind to a button every single time a page is loaded, but don’t remove it during unload. I have used many version of JQM and all work well. I do however use the 1.01 transitions because I like how good they look compared to the compromise now, and they do move faster… still I don’t think that will solve your issue per say.

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub