Few issues and solutions in iOS7 using Phonegap 2.6

Issue #1 : Status bar issue in ios7 using phonegap:

In Phonegap by default the apps are not with full screen.

But in iOS7, all the applications are running full screen so the status bar is overlapping with the top part of the webview/page.

Fix
Open MainViewController.m file (present inside classes folder)
Place the following code in (void)viewWillAppear:(BOOL)animated class.

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
       CGRect viewBounds = [self.webView bounds];
       viewBounds.origin.y = 20;
       viewBounds.size.height = viewBounds.size.height - 20;
       self.webView.frame = viewBounds;
}

Final view of the code will be:

-(void)viewWillAppear:(BOOL)animated
{
   if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
      CGRect viewBounds = [self.webView bounds];
      viewBounds.origin.y = 20;
      viewBounds.size.height = viewBounds.size.height - 20;
      self.webView.frame = viewBounds;
   }

   [super viewWillAppear:animated];
}

Issue #2 : Text field focus issue in ios7

If the text field is located at bottom of the page then on focus of the text field , the keyboard appeared but the page is not scrolled up which makes the text field hidden under the keyboard.

Fix
To fix this issue add the following meta tag to the main.html file.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Note:
‘height=device-height’ sets the height of the viewport same as height of the device.
So now when the keyboard appears and the webview get shrink to the height of the device solving the issue.

N.B.
If you have added extra 20px to adjust your page to display the status bar on top of the page now the content of the page will be scrolled.
So now we need to dynamically set the height of the viewport.

To do the same, add the following code to your jQuery ready method as follows.

$(document).ready(function() {
var height = $(window).height(); //Stores height of the device
var width = $(window).width(); //Stores width of the device

//Stores the height of the the viewport subtracting the status bar height.
var viewportHeight = height-20;

//Stores the content attribute value of the meta tag for viewport.
var customContent = 'user-scalable=no, initial-scale=1, maximum-scale=1, ' +
       'minimum-scale=1, width=device-width, height=' + viewportHeight;

//Sets the content to meta tag for viewport.
$('meta[name="viewport"]').attr('content',customContent);

Issue #3 : Issue with In-App browser plugin:

If you have changed MainViewController.m to fix the status bar issue and used Phonegap In-App browser Plugin in your application you might face the following issue.

Issue:
After the In-App browser is closed a blank margin of 20px will get added to the bottom of the page.
The number of times the In-App browser will be opened and closed the blank space will get added repeatedly.

Cause:
Each time you would open the In-App browser and go back to your app, the viewWillAppear() method would be called, and your view would shrink by 20px.
So we need to set a flag which will be set once the webview get shrink and prevent for further shrinking.

Fix:
Add the following code to required files.
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) {
      self.viewSizeChanged = NO;
   }
   return self;
}

- (void)viewWillAppear:(BOOL)animated
{
     if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7 && !self.viewSizeChanged) {
            CGRect viewBounds = [self.webView bounds];
            viewBounds.origin.y = 20;
            viewBounds.size.height = viewBounds.size.height - 20;
            self.webView.frame = viewBounds;
            self.viewSizeChanged = YES;
     }

     [super viewWillAppear:animated];
}

Hope this will help.

Written ByPrangya Das, Software Developer, Mindfire Solutions

Advertisements

2 thoughts on “Few issues and solutions in iOS7 using Phonegap 2.6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s