How to stop mobile screen rotaion using jquery?

Question

I am trying to create a html page using jQuery with rotation off in mobile. Its not working at my end.

Can you please give me any suggestion by which when I run this html page in mobile it shouldn't be rotate?

I have used following code :

$(window).bind('orientationchange resize', function(event){
   if (event.orientation) {
  if (event.orientation == 'landscape') {
    if (window.orientation == 90) {
   rotate(this, -90);
    } else {
   rotate(this, 90);
    }
  }
   }
 });

 function rotate(el, degs) {
   iedegs = degs/90;
   if (iedegs < 0) iedegs += 4;
   transform = 'rotate('+degs+'deg)';
   iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
   styles = {
  transform: transform,
  '-webkit-transform': transform,
  '-moz-transform': transform,
  '-o-transform': transform,
  filter: iefilter,
  '-ms-filter': iefilter
   };

   $(window).css(styles);
 };

Actually I am creating a page that must be shown in portrait — Gaurav Khandelwal, Jun 12 '15 at 05:37
and what do you expect to happen when a user looks at it with a device that is naturally wider than tall? tablet, phone held sideways, etc? — user230910, Jun 12 '15 at 05:40
Its dosen't look good. I want to it only portrait. when user try to move it in landscape position then it shouldn't be move — Gaurav Khandelwal, Jun 12 '15 at 05:46
As per my knowledge, it doesn't works that way.! javascript/Jquery can't control the device orientation due to technology limitations. If it was an app, then its possible.! But you can try something like giving an alert message when user changes the orientation of the mobile. For Example, check this banks mobile website. http://m.axisbank.com — Deepak Yadav, Jun 12 '15 at 05:47

score 0 · Answer 1 · edited May 23 '17 at 12:16

In the second half of this answer there is a trick using a json setting (mainfest) file.

The short story: Create a mainfest.json file:

 {
     "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
     "orientation":  "landscape", /* Could be "landscape" or "portrait" */
     ...
 }

Then add to your HTML page:

 <link rel="manifest" href="manifest.json">

How to stop mobile screen rotaion using jquery?

1 Answers1