Detect Device Orientation (Portrait/Landscape) in Javascript

We can detect device orientation mode with JavaScript to perform different functionalities. You can rearrange sections of your webpage to look better in portrait and landscape mode whenever the orientation changes.

To identify the device orientation, call window.matchMedia() method and pass portrait or landscape whichever mode you want to detect.

          // Detect Landscape or Portrait mode
const isPortrait = window.matchMedia('(orientation: portrait)').matches;

console.log(isPortrait);
        

This will return an object. Access matches property to check the mode or listen to the change event to detect the changes.

You will learn how to recognize whether a user is in portrait or landscape mode using JavaScript. As well as I will explain how to react when users change their screen orientations.

Also Read: How to Detect URL Hash Change in JavaScript (onhashchange)

Detecting Device Orientation (Portrait or Landscape) With JavaScript

Even though we can detect portrait or landscape devices in CSS but doing it in JavaScript gives us more control. Because we can only modify the layout styles with CSS but we can do many other things using JavaScript.

It is also very easy to detect portrait or landscape mode. You just have to write one line of code. Call matchMedia() method from the window object in JavaScript.

          // Detect Landscape or Portrait mode
const isPortrait = window.matchMedia('(orientation: portrait)').matches;

console.log(isPortrait);
        

This method accepts a query string that we used in the CSS media query. That's why I have shown you the CSS code earlier.

This method will return an object will properties and methods. You can access the matches property to check if the screen orientation matches the orientation mentioned in the matchMedia() method.

You will get true if it matches otherwise false. Now use this boolean value to apply different functionalities.

Also Read: Check Internet Connection Offline/Online Using JavaScript in Browser

How to Detect Device Orientation Changes in JavaScript

Most of the time, we don't just want to detect the device orientation modes. Rather we want to react when they change.

That means when a user goes from portrait to landscape or vice versa, we want to do something immediately for that change.

          // Detect orientation change in JavaScript
const portrait = window.matchMedia('(orientation: portrait)');

portrait.addEventListener('change', (event) => {
    // Check if orientation is portrait
    if (event.matches) {
        console.log('Device orientation is Portrait');
    } else {
        console.log('Device orientation is Landscape');
    }
});
        

We also need to call the matchMedia() method with a query string from the window object. Now you can listen to the change event on the returned object.

Also Read: Input VS Change VS Blur VS Focus - Differences of JavaScript Events

Whenever users change the orientation of their devices, this event callback function will run. With the matches property, check if it matches the orientation mentioned in the matchMedia() method.

Here if the matches property returns true, that means, the device is in Portrait mode. Otherwise, it is in Landscape mode.

How to Detect Orientation in CSS

Even though our main focus is to use JavaScript in this particular problem. It is really important to understand how we can use CSS to match portrait or landscape.

You can use the following media queries to add different styles for different orientations:

          @media screen and (orientation: portrait) {
    /* Add CSS styles for Portrait orientation */
}

@media screen and (orientation: landscape) {
    /* Add CSS styles for Landscape orientation */
}
        

Apply media query for screen and mention the orientation name: portrait or landscape. Now the CSS styles we write in between these Curly brackets {...} will be applied to that particular orientation mode.

Conclusion

That's it. As you can see detecting orientation mode is very easy. We can use CSS and JavaScript together in our project. CSS for styling and JavaScript for functionalities.

I hope today's topic is clear to you. From now on, use window.matchMedia() method to detect device orientation and identify the changes between portrait and landscape modes using JavaScript.