Blocking Device Rotation on Mobile Web Pages

How can I lock auto rotate on the website for the mobile phone?

You may use media query with orientation for this:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}

The trick here is to detect the changed orientation and using CSS transform to rotate the content of your web page so as to mock orientation-lock.

If you are comfortable with the idea of using Javascript to accomplish this then you can try this:

screen.orientation.lock('landscape');

See:

• https://w3c.github.io/screen-orientation/
• https://caniuse.com/screen-orientation

Prevent landscape orientation Mobile-website

You need to add the following meta tag to your page header like so:

<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

Or you can have separate CSS files for landscape and portrait mode like so:

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

Can a website force a device rotation lock?

In an update to an old ('12) question, I think this can help a lot of people!

I haven't figured out a true way of locking the device rotation, but came up with a perfect alternative, which I've seen a few people do too.

Option A. One simple alert

By use of a simple jQuery script, you can detect the orientation of your device.

if(window.innerHeight > window.innerWidth){
  alert("Please use Landscape!");
}

Well, a simple alert is easy, but the notification can be quite nicer!

Option B. One nice image notification

(update as of 04-2018: (as I just saw my post again, I thought of something easier..) use media queries. Pretty much the same as below, but instead of using Javascript, use css, hide the element by default and show it when the orientation is landscape → @media (orientation: landscape) {...})

Simply add an fixed element to your page that is shown when the orientation has changed.

HTML

<div class="turnDeviceNotification"></div>

CSS

.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
}

You can update this element with text, or simply connect it to a background-image by

.turnDeviceNotification {
  background-image:url('../images/turnDevice.jpg');
  background-size:cover;
}

Simply add a nice background to your images folder, such as the one below.

Noticed the object has an display: none ? That's because else it'd be shown even in portrait mode. Now, all you need to do is to use the script below, so the object is shown only in landscape mode.

jQuery(window).bind('orientationchange', function(e) {
 switch ( window.orientation ) {
  case 0:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 180:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;

  case -90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;
 }
});

This will show the notification only when the device orientation has changed to landscape.

Stop rotate on mobile device

@CommonsWare is right, you shouldn't just block the user from being able to rotate their device however they want. In fact, that's what makes mobile web apps so versatile. They encompass the principals of responsive design.

I know this isn't the answer you're really looking for but if you insist on doing so, take a look here: Block mobile web rotation with javascript.
I'm not sure but I'm guessing that still won't work simply because a web app isn't native to whatever device you're viewing it on and the app you're actually in is a browser eg Chrome, Safari, ect and those are almost certainly going to have different orientations enabled regardless of what your web app is doing.

---

Related Topics