How to detect device orientation with JavaScript?

Question

I've seen a number of ways to detect the screen orientation of the device, including using a check to test innerWidth versus innerHeight, like so.

function getOrientation(){
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Primary";
    return orientation;
}

But what if I want to check for changes in screen orientation as well with an event listener? I've tried this code but it doesn't work for me.

  function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();

It doesn't detect device orientation, and the listener does not register for me (I'm using Chrome's device emulator).

Griffey

Answer 1

There are two ways to do this:

First, as per the Screen API documentation, using >= Chrome 38, Firefox, and IE 11, the screen object is available to not only view the orientation, but to also register the listener on each time the device orientation changes.

screen.orientation.type will explicitly let you know what the orientation is, and for the listener you can use something simple like:

screen.orientation.onchange = function (){
    // logs 'portrait' or 'landscape'
    console.log(screen.orientation.type.match(/\w+/)[0]);
};

Second, for compatibility with other browsers like Safari that aren't compatible with Screen, this post shows that you can continue to use innerWidth and innerHeight on window resizing.

 function getOrientation(){
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait";
    return orientation;
}

 window.onresize = function(){ getOrientation(); }

Griffey

It's worth noting that this solution only works for Chrome >= 39 and Firefox Mobile on smartphones. The OP added the tag "ios" and the Screen API is not the solution for that. – Sotos