Can a website force a device rotation lock?

Question

I'm currently working on a website that is relatively equal for all devices; desktop & mobile. I'm working with % as I think that is the best option.

It's based on portrait mode. If you change the device to landscape, the whole website looks like a fat midget.

So I'm wondering: Is there a possibility to lock a website, displaying it in portrait all the time?

And by that, I mean: Device rotation locked. Not that when going to landscape, the website returns back to portrait, while in landscape. (which I already saw some code on StackOverflow.)

Check my site at: http://prototyping.iscs.nl/mobiel.html 

for reference :)

Thanks in advance

Answer 1

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.

Answer 2

Not possible. Lock rotation is a device setting: http://support.apple.com/kb/HT4085 When not locked by device, the browser will rotate and since your content is inside the browser, the content will rotate too. Maybe the viewport will help in solving your problem: < meta name="viewport" content="width = device-width"/>". I see you're missing that meta tag.

Answer 3

I don't think is possible but there are couple of ways to work around

js way: window.DeviceOrientationEvent

css way

@media (orientation: landscape) { body { background-color: black; } }

Answer 4

@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;
  }
}

Source : https://css-tricks.com/snippets/css/orientation-lock/

Answer 5

Not possible as of now. But the other way around would be,

Using CSS, Media query helped work properly for a landscape view.

min-aspect-ratio: 13/9 is very important as if you don't specify this, for some mobile devices, if you focus on a form field, the keyboard is opened, which basically changed the viewport's height which basically triggers the landscape media query. Hence min-aspect-ratio is very important for landscape media query.

@media only screen and (min-width: 320px) and (max-width: 1023px) and (min-aspect-ratio: 13/9) and (orientation: landscape) {
    // Landscape view properties
}

Using JavaScript, we can use screen.availHeight as screen height doesn't change when keyboard displays. Also have to add more checks to allow Desktop view for following.

var currentOrientation = function() {  
  if(screen.availHeight < screen.availWidth){
    // Landscape view
  } else {
    // Portrait view
  }
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
window.addEventListener('resize', currentOrientation);