Javascript Orientation Change doesn't work with PhoneGap on iPad

javascript iphone ipad cordova

13,250

I just found an other solution to the problem. I use the body onload function with the onDeviceReady function from phonegap.js to check the orientations:

The following javascript code works properly now:

    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady() {
        document.addEventListener("orientationChanged", updateOrientation);
    }

    function updateOrientation(e) {
        switch (e.orientation) {
            case 90:
                window.location = "index_landscape.html";
                break;
            case -90:
                window.location = "index_landscape.html";
                break;
        }
    }

UPDATE: This worked more than two years ago with old versions of Phonegap and iOS SDK, but according some users, it doesn't work anymore.

13,250

Author by

axooh

Partner and Software Engineer @gridonic. Web and Mobile Enthusiast. From Bern, Switzerland.

Updated on June 05, 2022

Comments

axooh almost 2 years
I'm adapting a small HTML/CSS/Javascript driven web magazine as an iApp for the iPad with the great mobile framework PhoneGap. Everything works great, except the orientation change from portrait to landscape mode.

I use the following Javascript code in the header of the index.html (portrait):
```
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;

  function updateOrientation() {
   if (isiPad || isiPhone) {
    switch (window.orientation) {
     case 90:
      window.location = "index_landscape.html";
      break;
     case -90:
      window.location = "index_landscape.html";
      break;
    }
   }
  }
```
with the following body tag:
```
<body onorientationchange="updateOrientation();">
```
If I rotate the iPad to landscape mode, it doesn't change to index-landscape.html.

Does anybody know where the problem is? Isn't it possible to change the HTML file, while changing orientation within the PhoneGap framework? With other words, can I only use one HTML file (index.html) with PhoneGap and have to use CSS for the orientation change?

If I check out the app as a website with the iPad Safari browser, the orientation change works properly.

Thanks for any help!