Working with Orientation on the iPad in PhoneGap

I had a web app that I wanted to shift a toolbar’s location to bottom in portrait mode and to the right in landscape mode.  I got this working fine in Mobile Safari, but then ran into some issues when I moved it into PhoneGap.  Here is how I got it working.

1.  Making it work outside PhoneGap

I first wanted it to work in the Mobile Safari browser as well as on the desktop.  I am using JQuery, so to make it work outside of the PhoneGap shell, I needed to put some code in the $(document).ready function.

 $(document).ready(function () { window.addEventListener( 'onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false); }); 

“setHeight” is my function that recalculates positions based on the current screen size.

2.  Making it work inside PhoneGap

This works in the browser, but I found it was not getting triggered in the PhoneGap application.  This is because the JQuery ready function is getting called too early and because it raises a different event: “onorientationChanged”.  So to my $(document).ready function I added:

 document.addEventListener(“deviceready”, function(){window.addEventListener( ‘onorientationChanged’ in window ? ‘orientationChanged’ : ‘resize’, setHeight, false); }); 

Now if PhoneGap gets initialized, it will trigger the deviceready event and register this new event to call my same setHeight function.

3.  PhoneGap’s window size issue

Unfortunately I found that my bottom toolbar was positioned 20px too low in the PhoneGap windows.  Turns out there is a bug with PhoneGap against some versions of iOS where the viewport gets calculated wrong.  Michael Brooks posted a solution (revised by Ryan Betts) at where you simply modify the *AppDelegate.m file in the PhoneGap project to recalculate the view, as follows:

- (void)webViewDidFinishLoad:(UIWebView *)theWebView { /* Fix the viewport to properly fit to the screen */ CGRect windowFrame = [ [ UIScreen mainScreen ] bounds ]; CGRect webViewFrame = [ [ UIScreen mainScreen ] applicationFrame ]; webViewFrame.origin = windowFrame.origin; //set the origin to 0,0 UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation]; if (orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight) { webViewFrame.size.width = windowFrame.size.height; webViewFrame.size.height = windowFrame.size.width; } webView.frame = webViewFrame; return [ super webViewDidFinishLoad:theWebView ]; } 

I didn’t test this on more than one device, but supposedly that fix works on all iOS devices.

3 thoughts on “Working with Orientation on the iPad in PhoneGap

  1. In your item #2, you are missing a “d” in the example that makes that part of the tip slightly useless (in my experience at least, there seems to be many versions and discussions about this). But you got me on the right track to find out, at least… 🙂

    Correct spelling for the working phonegap version is:

    window.addEventListener(“orientationChanged”, orientationChangedHandler);

    (The orientationChangedHandler function is my handler of orientation change, then.)

    • Good catch. It looks like there may have been a change in PhoneGap since I originally posted this article. I updated the event to be “onorientationChanged”.

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s