⚡️ How to Detect Device Orientation with Javascript

Sometimes, you just want to know if a screen is in portrait or landscape mode. There are two primary places you would want to do this: in Javascript, and in CSS. Let's look at how to detect the screen's orientation in both.

Detecting Orientation in CSS

In CSS, simply use the following media queries to match any portrait or landscape device:

/* Portrait orientation */
@media screen and (orientation: portrait) {

}
/* Landscape orientation */
@media screen and (orientation: landscape) {

}

Detecting Orientation in Javascript

Since screen.orientation has patchy support, you can use the same media query in Javascript like so:

let portrait = window.matchMedia("(orientation: portrait)");

portrait.addEventListener("change", function(e) {
    if(e.matches) {
        // Portrait mode
    } else {
        // Landscape
    }
})

Detecting Orientation Changes in Javascript

Should you need to simply detect when a user changes orientation, you can use the following event listener:

screen.orientation.addEventListener("change", function(e) {
    // Do something on change
});

Currently, this is not supported in Safari, so your mileage may vary on this one. If you need to, you can use the matchMedia query from above to achieve similar functionality.

Conclusion

Detecting screen orientation is easy - and in the future we'll be able to use screen.orientation to reliably do this. For now, it's best to stick with CSS media queries and window.matchMedia.

Comments

[Zohaib Ijaz]

I want to add one thing, don't forget to get initial value using screen.orientation.type otherwise you will not have right value for orientation unless you change orientation then it will be updated. So if you are saving this in some kind of state, get the initial value and then you can rely on change event

[Praskand Upadhyay]

great!🙂👍