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

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

I am building a website specifically for mobile devices. There is one page in particular which is best viewed in landscape mode.
Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so, display a message informing the user that the page is best viewed in landscape mode? If the user is already viewing it in landscape mode then no message will appear.
So basically, I want the site to detect the viewport orientation, if orientation is Portrait, then display an alert message advising the user that this page is best viewed in Landscape mode.
Many thanks,
Dan

Solutions/Answers:

Solution 1:

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

Related:  How can I let a table's body scroll but keep its head fixed in place?

Solution 2:

You can also use window.matchMedia, which I use and prefer as it closely resembles CSS syntax:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Tested on iPad 2.

Solution 3:

David Walsh has a better and to the point approach.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

http://davidwalsh.name/orientation-change

Solution 4:

You can use CSS3 :

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

Solution 5:

There are a few ways to do it, for example:

  • Check window.orientation value
  • Compare innerHeight vs. innerWidth

You can adapt one of the methods below.


Check if device is in portrait mode

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Check if device is in landscape mode

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

Example usage

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

How do I detect the orientation change?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

Solution 6:

I think the more stable solution is to use screen instead of window, because it could be both – landscape or portrait if you will resize your browser window on desktop computer.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}