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

javascript jquery mobile viewport device-orientation
Dan picture Dan · Feb 7, 2011 · Viewed 340.3k times · Source

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.

Answer

tobyodavies picture tobyodavies · Feb 7, 2011 
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!");
}

Related questions

What is the best way to detect a mobile device?

Is there a way to detect whether or not a user is using a mobile device in jQuery? Something similar to the CSS @media attribute? I would like to run a different script if the browser is on a handheld …

Read More
How to handle floats and decimal separators with html5 input type number

Im building web app which is mainly for mobile browsers. Im using input fields with number type, so (most) mobile browsers invokes only number keyboard for better user experience. This web app is mainly used in regions where decimal separator …

Read More
onClick not working on mobile (touch)

Ok, what im trying to do is slide a div down when the user clicks a list item. Problem is I am using Selectric https://github.com/lcdsantos/jQuery-Selectric which converts a Select box to an unordered list. So when …

Read More