Detect Change in Orientation Using JavaScript

var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :(");
}

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

How to detect device orientation with JavaScript?

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

Is there any window event for orientation change using @HostListener like we have @HostListener(window:scroll, ['$event']) for scrolling?

From MDN; you can use window:orientationchange to detect when the orientation of the device has changed.

@HostListener('window:orientationchange', ['$event'])
onOrientationChange(event) {
  console.log('orientationChanged');
}

Here is a short clip to see this in action in Chrome Dev Tools: https://streamable.com/o2ilm

Deprecated: Window: orientationchange event

We can use experimental feature ScreenOrientation

screen.orientation.addEventListener('change', function(e) { ... })
screen.orientation.onchange = function(e) { ... }

You can check the available values from screen orientation table for orientation types:

• portrait-primary
• portrait-secondary
• landscape-primary
• landscape-secondary

Here's an example:

screen.orientation.addEventListener('change', function(e) {
  if (e.currentTarget.type === 'landscape-primary') {
    // landscape mode => angle 0
  } else if (e.currentTarget.type === 'portrait-primary') {
    // portrait mode => angle 0
  }
})

Check browser compatibility table.

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

This is what I do:

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

window.matchMedia('(orientation: portrait)').addListener(function(m) {
       let div_class = document.querySelector('.landscape');
       if (m.matches) {
                div_class.className = 'portrait';
            } else {
                div_class.className = 'landscape';
            }
    });

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);