Question

192

How to detect device orientation with JavaScript?

rated 0 times [ 194] [ 2] / answers: 1 / hits: 26513 / 8 Years ago, fri, april 15, 2016, 12:00:00

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).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaileya

Add To Favorites

Follow

Total Points: 168

Total Questions: 95

Total Answers: 72

Location: Antigua and Barbuda

Member since Sat, Apr 24, 2021

3 Years ago

answered 8 Years ago kalynnkathrynd · Accepted Answer

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(); }