1

Anybody tell me what is the best solution not to allow Landscape mode on mobile device and force to lock it using Javascript ,Jquery, CSS or anything while viewing any webpage.

Sannan
  • 113
  • 6
  • 1
    You posted [Lock Device Landscape Orientation](http://stackoverflow.com/questions/32115413/lock-device-landscape-orientation) just an hour ago. How does this question differ from that? – hata Aug 20 '15 at 12:10

1 Answers1

1

You can check wether the width larger is than the height, which is landscape.

You can check on window resize wether it's landscape or portrait this way - and act accordingly, like placing a fixed div on the whole page.

Like this:

$(window).resize(function(){  //event onWindowResize
    if($(window).width() < $(window).height()) //So, portrait
        $("<div />").css({
            position: "fixed",
            width: "100%",
            height: "100%",
            top: 0,
            left: 0
        }).addClass("locked-for-portrait").text("Please use our website in landscape mode (turn your phone 90 degrees)").appendTo("body");  //add a fixed div over your page.
    else //So, landscape.
        $(".locked-for-portrait").remove(); //Remove the div - if it's on the page.
});

$(document).ready(function(){
    $(window).resize(); //trigger the resize once on pageload
});

In new browser API's it will be available to lock the orientation with a webpage. But currently it's still experimental and not working on most of the browsers. (see https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation)

Roboroads
  • 1,463
  • 1
  • 12
  • 22