How to disable orientation Landscape in app and our website?

Question

i want to disable orientation:Landscape in our app and website using jquery. so please help me for disable in app and website.

i do not know any code for disable so i have no code so please help me.. — Praveen Kumar Tripathi, Oct 14 '16 at 11:50

score 1 · Answer 1 · answered Oct 14 '16 at 11:49

Sorry, You can not force orientation on a web page, but you can show some information in content when user is in landscape mode.

To do that take help of media queries and check the orientation, in the landscape stylesheet(style_landscape.css) hide everything and show a message that your app can't be opened on landscape and the user must revert to portrait mode to continue.

<link rel="stylesheet" type="text/css" href="css/style_landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_portrait.css" media="screen and (orientation: portrait)">

score 0 · Accepted Answer · answered Oct 14 '16 at 12:00

i'm not sure it will work, but Try this

<head>
<style type="text/css">
#landscape{
         position: absolute;
         top: 0px;
         left: 0px;
         background: #000000;
         width: 100%;
         height: 100%;
         display: none; 
         z-index: 20000;
         opacity: 0.9;
         margin:0 auto;
}
#landscape div{

        color: #FFFFFF;                                  
        opacity: 1;
        top: 50%;
        position: absolute;
        text-align: center;
        display: inline-block;
        width: 100%;
}
</style>
<script>          
      function doOnOrientationChange()
      {
        switch(window.orientation) 
        {  
          case -90:                 
                 document.getElementById("landscape").style.display="block";
                 break;
          case 90:              
                document.getElementById("landscape").style.display="block";                 
                break;
         default:                   
                document.getElementById("landscape").style.display="none";
                break;                            
        }
      }

      //Listen to orientation change
      window.addEventListener('orientationchange', doOnOrientationChange);  

    </script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>

thank you this code are working. – Praveen Kumar Tripathi Oct 14 '16 at 12:04 — Praveen Kumar Tripathi, Oct 14 '16 at 12:04

How to disable orientation Landscape in app and our website?

2 Answers2