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
14 views



Related Hot Questions



Government Jobs Opening

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

...