Organizational Research By

Surprising Reserch Topic

detect viewport orientation if orientation is portrait display alert message ad


detect viewport orientation if orientation is portrait display alert message ad  using -'javascript,jquery,mobile,viewport,device-orientation'

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
    

asked Oct 19, 2015 by sumit_jaiswalmca
0 votes
17 views



Related Hot Questions

14 Answers

0 votes
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...

answered Oct 19, 2015 by vijaygupta1980
0 votes

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

answered Oct 19, 2015 by okesh.badhiye
0 votes

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.

answered Oct 19, 2015 by kotmus2002
0 votes

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!");
}
answered Oct 19, 2015 by deepak
0 votes

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);
    });
});
answered Oct 19, 2015 by patelnikul321
0 votes

After some experimentation I have found that rotating an orientation aware device will always trigger a browser window's resize event. So in your resize handler simply call a function like:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}
answered Oct 19, 2015 by r3tt
0 votes

Don't try fixed window.orientation queries (0, 90 etc doesn't mean portrait, landscape etc):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

Even on iOS7 depending how you come into the browser 0 isn't always portrait

answered Oct 19, 2015 by ankitarajoria4
0 votes
//see also questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}
answered Oct 19, 2015 by kotmus2002
0 votes

Get the orientation (at any time in your js code) via

window.orientation

When window.orientation returns 0 or 180 then you are in portrait mode, when returning 90 or 270 then you are in landscape mode.

answered Oct 19, 2015 by kinnari
0 votes

In order to apply all of these great comments to my daily coding, for continuity between all my applications, I have decided to use the following in both my jquery and jquery mobile code.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}
answered Oct 19, 2015 by tejas lakhani
0 votes

Thanks to tobyodavies for guiding the way.

To achieve an alert message based on the mobile device's orientation you need to implement the following script within the function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}
answered Oct 19, 2015 by loknath.ganji
0 votes
" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml">
 
  Rotation Test
  
  
  
 
 
   
LANDSCAPE
answered Oct 19, 2015 by mannumits1
0 votes

another alternative to determine orientation, based on comparison of the width/height:

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
} 

You use it on "resize" event:

window.addEventListener("resize", function() { ... });
answered Oct 19, 2015 by param.oncemore
0 votes

This expands on a previous answer. The best solution I've found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met, and then have the JS test for that attribute.

So for instance, in the CSS you'd have:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

You then go to JavaScript (I'm using jQuery for funsies). Color declarations may be weird, so you may want to use something else, but this is the most foolproof method I've found for testing it. You can then just use the resize event to pick up on switching. Put it all together for:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

The best part of this is that as of my writing this answer, it doesn't appear to have any effect on desktop interfaces, since they (generally) don't (seem to) pass any argument for orientation to the page.

answered Oct 19, 2015 by rajnipancholi

...