---
title: Detect Landscape/Portrait Mode using JavaScript
description: >-
  Learn the quick technique on how you can detect the device mode landscape or portrait using
  JavaScript.
url: https://expiredqueues.com/detect-landscape-portrait-mode-using-javascript/
date: '2012-02-01T10:58:33.000Z'
image: https://expiredqueues.com/images/og/detect-landscape-portrait-mode-using-javascript-8ea37895.jpg
---

Written in February 2012. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Tutorials posts coding

# Detect Landscape/Portrait Mode using JavaScript

1 February 2012 By Adrian 2 min read

Detecting device mode (landscape or portrait) using CSS3 is now very much easy and it is state of the art. But it won't work in certain situations like I had. I failed to make @media queries detect device orientation on iPhone. So I came to write a JavaScript fix to get the work done.

Check my [orientation test using CSS3 @media queries here](http://shekhardesigner.com/css/media-queries.html). The demo page should show text 'Portrait' on portrait mode and 'Landscape' on respective mode. But it does not. You might want to try with your own device. Some of my friends said it is working.

I Googled for the solutions, but I must say I couldn't find any reliable one :(. If you prefer to use [CSS3](https://expiredqueues.com/) media queries, check out the post on Stuff & Nonsense. And here it goes my JavaScript function that will detect the landscape/portrait mode.

First, let us create a function called '**checkOrientation**' so that we can evoke it by just a name instead of repeating whole lines.

Inside this function we will check the device orientation degree which we are going to take from window\.orientation method. If we get the degree 0 - it's the mode portrait else it's landscape.  Since we will be using window. orientation method, this function will only work in handheld devices. So here it goes our function:

```js

function checkOrientation(){
      var currMode = "";

      switch(window.orientation){

           case 0:
           currMode = "portrait";
           break;

           case -90:
           currMode = "landscape";
           break;

           case 90:
           currMode = "landscape";
           break;

           case 180:
           currMode = "landscape";
           break;
     }
     document.getElementsByTagName("body")[0].setAttribute("class", currMode);
}
```

I have used a switch statement to set the currMode variable, which we are going to use as class on required html elements. I set that class on body.

Now it's time to call the function, you can call it directly or on window\.load method. I think window\.load method is better and safe. So lets call it:

```js

window.load = function() {
     checkOrientation();
}
```

When our page is ready, check the class of body element. We are done. But wait what if we change the orientation now? Yes, we need to update the class on orientation change.

For this, we have window\.onorientationchange method, which is also available on devices only. We will recall our function inside this method:

```js

window.onorientationchange = function(){
      checkOrientation();
}
```

That's it. Now we are completely done. Check-out the [Landscape/Portrait Mode detection demo](http://shekhardesigner.com/css/media-queries-javascript.html).

[Previously 7 Ways to Code Faster HTML CSS](https://expiredqueues.com/code-faster-html-css/) [Next Check (Glossy) Icon Freebie](https://expiredqueues.com/glossy-check-icon/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Detect Landscape/Portrait Mode using JavaScript",
  "datePublished": "2012-02-01T10:58:33.000Z",
  "dateModified": "2012-02-01T10:58:33.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/detect-landscape-portrait-mode-using-javascript/",
  "keywords": "posts, coding, micro-tuts, tips-tricks",
  "articleSection": "Tutorials"
}
```