PhoneGap Orientation Example

This post is more than 2 years old.

This morning I read a post on the Phonegap Google group asking about their support for orientation changes. While PhoneGap has good event support it doesn't support orientation changes. Why? Because there is no need - turns out the mobile browsers support this themselves. It is probably a good idea to remember that your mobile browsers can do quite a bit themselves. If you find something missing from PhoneGap that you think should be included, ensure the browsers just don't support it already. (And if not, check out the excellent list of plugins.)

I did a quick Google and found that both Safari and Android support a simple orientation change event listener. With that I whipped up a quick PhoneGap application. I began with a super simple front end:

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
	  <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
	  <script type="text/javascript" charset="utf-8" src="main.js"></script>

  </head>
  <body onload="init();" >
  	
		<h2>Orientation Test</h2>
		<div id="status"></div>

  </body>
</html>

And my code is then just:

function init() {
    window.addEventListener("orientationchange", orientationChange, true);

}

function orientationChange(e) {
    var orientation="portrait";
    if(window.orientation == -90 || window.orientation == 90) orientation = "landscape";
    document.getElementById("status").innerHTML+=orientation+"<br>";
}

Two things to notice here.

  1. Notice that I check window.orientation for -90 and 90. Those values represent a landscape view. It also implies you can check for rotating one way versus the other.
  2. My application listens for the change, if you want to know on startup what the current orientation is, just perform the same check. You could abstract out most of orientationChange into getOrientation() and simply call that in you rinit and orientationChange methods.

And here is a quick screen shot of it in action.

p.s. Recently I mentioned a plugin that significantly improves the experience of creating PhoneGap applications in Eclipse. I began having issues with orientation changes crashing the application. On a whim I decided to check and see if a new version of the plugin existed and indeed there was. Updating fixed everything. I still wish the plugin had a way to output an empty HTML file but it's much easier than building things out by hand.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Cesidio DiBenedetto posted on 3/28/2012 at 7:45 PM

According this post (http://www.matthewgifford.c..., it's not that straightforward. The values for window.orientation are not really standardized.

Comment 2 by Raymond Camden posted on 3/28/2012 at 7:52 PM

Fair point. I'll mention that PhoneGap has a Device API though. You could use that to sniff the appropriate OS and ensure you correctly handle the values.

Comment 3 by Cesidio DiBenedetto posted on 3/30/2012 at 7:48 PM

True enough.

My previous post was not a slight towards you or your post. It's just that I am experiencing this exact problem at the moment and wanted to bring more clarity to the issue.

Keep up the good work.

Comment 4 by Raymond Camden posted on 3/31/2012 at 1:39 AM

Cesidio - didn't take it as a slight at all. :) The devil is in the details, right? Thank you for bringing this up. It is easy to deal with, but I didn't know this was a problem until you talked about it.

Comment 5 by Aelx posted on 1/17/2014 at 4:41 PM

Hey Raymond,

Great blog as always, I do enjoy reading your content regarding phonegap!!

It's always great to see a working example.

Basically I am trying to fix a android reflow bug that happens on device orientation change any element that is a position:fixed; and width:100%; it doesnt get resized when the device changes orientation, so I tried your code above and this doesnt work, I don't even get any console output and the event isnt firing (using samsung tab2, android 4.2.2)

I was wondering whether its possible to watch the window or document resize then i could just resize my fixed element when this happens, but I was wondering if there was a better approach.

Comment 6 by Raymond Camden posted on 1/28/2014 at 12:22 AM

Sorry for the delay in responding. I'm not aware of any bug with orientation and Android, so maybe it is just an issue on the tab? You could certainly *try* the resize idea. Maybe look at responsive CSS too.

Comment 7 by Alex posted on 1/28/2014 at 10:32 PM

In the end I used jquery to watch for orientationchange and then hide and show the navigation fixed element, this then fixed the problem.

// first of all I only fired this function for the android platform
$(window).bind('orientationchange', function(e) {
$('nav').hide().slideDown();
});

Comment 8 by Raymond Camden posted on 1/28/2014 at 10:36 PM

Hmm. But this is the *same* code I used. The only difference is you used jQuery. :)

Comment 9 by Ari posted on 10/29/2014 at 8:39 PM

Hi! I think I have another problem because my Phonegap App does not rotate at all! I'm searching for a solution because it doesn't rotate on the Android Simulator nor the Android Smartphone itself.

It's really an automatic function in the recents versions? Or needs to be declared?
Thanks and great blog!

Comment 10 by Raymond Camden posted on 10/30/2014 at 2:45 AM

Check your config.xml, are you locking orientation? http://cordova.apache.org/d...

Comment 11 by Ari posted on 10/31/2014 at 6:11 PM

Raymond... you are a genious!!! thanks a lot!

in fact, there was NOT a lock in config.xml, but because of your comment I checked the AndroidManifest and there it was a "force portrait" tag!!! hahahaha

no wonder why you are where you are!
thanks

Comment 12 by Raymond Camden posted on 11/1/2014 at 8:26 PM

Heh, I got lucky. ;)

Comment 13 by Tarun Narula posted on 3/28/2015 at 4:14 AM

Hey, can i get the link of 'main.js' which is included in this code !

Comment 14 (In reply to #13) by Raymond Camden posted on 3/28/2015 at 12:45 PM

Sorry I don't have the file anymore - but you can literally just cut and paste the code above. (I cleaned up the formatting a bit.)