{"id":1300,"date":"2013-10-05T16:36:54","date_gmt":"2013-10-05T23:36:54","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=1300"},"modified":"2013-10-05T16:39:33","modified_gmt":"2013-10-05T23:39:33","slug":"fixing-the-phonegap-status-bar-in-ios7","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2013\/10\/fixing-the-phonegap-status-bar-in-ios7\/","title":{"rendered":"Fixing the PhoneGap Status Bar in iOS7"},"content":{"rendered":"

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<\/a> looks after the update to iOS7.<\/p>\n

\"2013-10-05<\/a><\/p>\n

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<\/a>. There are numerous ways to fix this, but perhaps the most elegant if you are using PhoneGap 3.0 was suggested by Shazron<\/a> from Adobe:<\/p>\n

[code]function onDeviceReady() {
\n if (parseFloat(window.device.version) === 7.0) {
\n document.body.style.marginTop = “20px”;
\n }
\n}<\/p>\n

document.addEventListener(‘deviceready’, onDeviceReady, false);[\/code]<\/p>\n

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:<\/p>\n

[code]- (void)viewWillAppear:(BOOL)animated
\n{
\n \/\/ Set the main view to utilize the entire application frame space of the device.
\n \/\/ Change this to suit your view’s UI footprint needs in your application.<\/p>\n

UIView* rootView = [[[[UIApplication sharedApplication] keyWindow] rootViewController] view];
\n CGRect webViewFrame = [[[rootView subviews] objectAtIndex:0] frame]; \/\/ first subview is the UIWebView<\/p>\n

if (CGRectEqualToRect(webViewFrame, CGRectZero)) { \/\/ UIWebView is sized according to its parent, here it hasn’t been sized yet
\n self.view.frame = [[UIScreen mainScreen] applicationFrame]; \/\/ size UIWebView’s parent according to application frame, which will in turn resize the UIWebView
\n }<\/p>\n

\/\/ Begin – New for iOS7
\n NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@”.”];
\n if ([[vComp objectAtIndex:0] intValue] >= 7) {
\n CGRect oldBounds = [self.view bounds];<\/p>\n

CGRect newViewBounds = CGRectMake(0, -20, oldBounds.size.width, oldBounds.size.height-20);
\n CGRect newWebViewBounds = CGRectMake(0, 0, oldBounds.size.width, oldBounds.size.height-20);<\/p>\n

[self.view setBounds:newViewBounds];
\n [self.webView setBounds:newWebViewBounds];
\n }
\n \/\/ End – New for iOS 7<\/p>\n

[super viewWillAppear:animated];
\n}[\/code]<\/p>\n

Both snippets of code seek to move the view window down 20 pixels to leave space for the Status Bar.<\/p>\n

Now all that is left is to fix my oversized images. This was simply done with some CSS. Originally the code was:<\/p>\n

[code]#buttons li a img {
\n height: 90%;
\n}[\/code]<\/p>\n

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.<\/p>\n

[code]#buttons li a img {
\n height: 90%;
\n max-height: 90%;
\n}[\/code]<\/p>\n

Not sure why it is needed honestly, but it doesn’t hurt backwards compatibility. Hope it helps someone else out!<\/p>\n

\"2013-10-05<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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
more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,24,19,38,43,23],"tags":[121,36,14,5,88,34,87,119],"class_list":["post-1300","post","type-post","status-publish","format-standard","hentry","category-advertising","category-blog","category-camera","category-cordova","category-css","category-whipped","tag-cordova","tag-css3","tag-iad","tag-ios","tag-ios7","tag-phonegap","tag-status-bar","tag-whipped"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1300"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=1300"}],"version-history":[{"count":3,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1300\/revisions"}],"predecessor-version":[{"id":1305,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1300\/revisions\/1305"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=1300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=1300"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=1300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}