How do I correctly detect orientation change using Phonegap on iOS?

How do I correctly detect orientation change using Phonegap on iOS?

I found this orientation test code below looking for JQTouch reference material. This works correctly in the iOS simulator on mobile Safari but doesn’t get handled correctly in Phonegap. My project is running into the same issue that is killing this test page. Is there a way to sense the orientation change using JavaScript in Phonegap?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body’s class attribute to portrait. Consequently, all style definitions matching the body[class=”portrait”] declaration
in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”, “portrait”);

/* Add a descriptive message on “Handling iPhone or iPod touch Orientation Events” */
document.getElementById(“currentOrientation”).innerHTML = “Now in portrait orientation (Home button on the bottom).”;
break;

case 90:
/* If in landscape mode with the screen turned to the left, sets the body’s class attribute to landscapeLeft. In this case, all style definitions matching the
body[class=”landscapeLeft”] declaration in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”, “landscape”);

document.getElementById(“currentOrientation”).innerHTML = “Now in landscape orientation and turned to the left (Home button to the right).”;
break;

Related:  Bootstrap woff2 font not getting loaded correctly

case -90:
/* If in landscape mode with the screen turned to the right, sets the body’s class attribute to landscapeRight. Here, all style definitions matching the
body[class=”landscapeRight”] declaration in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”, “landscape”);

document.getElementById(“currentOrientation”).innerHTML = “Now in landscape orientation and turned to the right (Home button to the left).”;
break;
}
}

Solutions/Answers:

Solution 1:

This is what I do:

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90 || 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
}
  
window.addEventListener('orientationchange', doOnOrientationChange);
  
// Initial execution if needed
doOnOrientationChange();

Update May 2019: window.orientation is a deprecated feature and not supported by most browsers according to MDN. The orientationchange event is associated with window.orientation and therefore should probably not be used.

Solution 2:

I use window.onresize = function(){ checkOrientation(); }
And in checkOrientation you can employ window.orientation or body width checking
but the idea is, the “window.onresize” is the most cross browser method, at least with the majority of the mobile and desktop browsers that I’ve had an opportunity to test with.

Solution 3:

I’m pretty new to iOS and Phonegap as well, but I was able to do this by adding in an eventListener. I did the same thing (using the example you reference), and couldn’t get it to work. But this seemed to do the trick:

// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation); 

function updateOrientation(e) {
switch (e.orientation)
{   
    case 0:
        // Do your thing
        break;

    case -90:
        // Do your thing
        break;

    case 90:
        // Do your thing
        break;

    default:
        break;
    }
}

You may have some luck searching the PhoneGap Google Group for the term “orientation”.

Related:  What are the accessibility implications of using a framework like angularjs?

One example I read about as an example on how to detect orientation was Pie Guy: (game, js file). It’s similar to the code you’ve posted, but like you… I couldn’t get it to work.

One caveat: the eventListener worked for me, but I’m not sure if this is an overly intensive approach. So far it’s been the only way that’s worked for me, but I don’t know if there are better, more streamlined ways.


UPDATE fixed the code above, it works now

Solution 4:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
  // you're in LANDSCAPE mode
}

Solution 5:

While working with the orientationchange event, I needed a timeout to get the correct dimensions of the elements in the page, but matchMedia worked fine. My final code:

var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;

if (typeof(matchMedia) !== 'undefined') {
  // use matchMedia function to detect orientationchange
  window.matchMedia('(orientation: portrait)').addListener(function() {
    // your code ...
  });
} else {
  // use orientationchange event with timeout (fires to early)
  $(window).on('orientationchange', function() {
    window.setTimeout(function() {
      // your code ...
    }, 300)
  });
}

Solution 6:

I believe that the correct answer has already been posted and accepted, yet there is an issue that I have experienced myself and that some others have mentioned here.

Related:  jQuery clone() not cloning event bindings, even with on()

On certain platforms, various properties such as window dimensions (window.innerWidth, window.innerHeight) and the window.orientation property will not be updated by the time that the event "orientationchange" has fired. Many times, the property window.orientation is undefined for a few milliseconds after the firing of "orientationchange" (at least it is in Chrome on iOS).

The best way that I found to handle this issue was:

var handleOrientationChange = (function() {
    var struct = function(){
        struct.parse();
    };
    struct.showPortraitView = function(){
        alert("Portrait Orientation: " + window.orientation);
    };
    struct.showLandscapeView = function(){
        alert("Landscape Orientation: " + window.orientation);
    };
    struct.parse = function(){
        switch(window.orientation){
            case 0:
                    //Portrait Orientation
                    this.showPortraitView();
                break;
            default:
                    //Landscape Orientation
                    if(!parseInt(window.orientation) 
                    || window.orientation === this.lastOrientation)
                        setTimeout(this, 10);
                    else
                    {
                        this.lastOrientation = window.orientation;
                        this.showLandscapeView();
                    }
                break;
        }
    };
    struct.lastOrientation = window.orientation;
    return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);

I am checking to see if the orientation is either undefined or if the orientation is equal to the last orientation detected. If either is true, I wait ten milliseconds and then parse the orientation again. If the orientation is a proper value, I call the showXOrientation functions. If the orientation is invalid, I continue to loop my checking function, waiting ten milliseconds each time, until it is valid.

Now, I would make a JSFiddle for this, as I usually did, but JSFiddle has not been working for me and my support bug for it was closed as no one else is reporting the same problem. If anyone else wants to turn this into a JSFiddle, please go ahead.

Thanks! I hope this helps!