Can a website force a device rotation lock?

29,270

Solution 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. Sample image notification

Solution 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.

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

Solution 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/

Share:
29,270
Sander Schaeffer
Author by

Sander Schaeffer

Overactive and alternative | Musician playing Guitar and Drums | Marketeer &amp; (web)Designer | ~ Music all the time ~ I post thanks below every question. We remain human, therefor, keep humanity in our posts, instead of removing it. Effort is always rewarded. I always upvote each answer to any of my questions.

Updated on August 05, 2022

Comments

  • Sander Schaeffer
    Sander Schaeffer almost 2 years

    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

  • Sander Schaeffer
    Sander Schaeffer over 11 years
    Thanks for the information about rotation. I think i rather don't use that meta tag. I copied that to my HTML script, but the whole UI gets wrong on my phone, in portrait mode. When deleted that line, it looks OK again..
  • Niels Steenbeek
    Niels Steenbeek over 11 years
    Maybe try a hard-coded width: < meta name="viewport" content="width = 320"/>". This article is about portait/landscape: webdesign.tutsplus.com/tutorials/htmlcss-tutorials/… Bad thing of this article is that they use 'maximum-scale'.
  • Niels Steenbeek
    Niels Steenbeek about 10 years
    Good anwer, but not the answer to the question. Locking the device rotation is not possible, except when using the device settings themselves. Orientation change is there since mobile devices came out. w3.org/TR/screen-orientation/#locking-the-orientation
  • Sander Schaeffer
    Sander Schaeffer about 10 years
    I'm not saying this locks the device rotation, but this comes much better near the situation of the user rotating the device itself to the portrait mode. Locking the Viewport is awefull for your Web experience.
  • Turbojohan
    Turbojohan about 8 years
    Instead of jQuery to detect orientation change, you can just use:@media all and (orientation:landscape) { .turnDeviceNotification { display:block; } } @media all and (orientation:portrait) { .turnDeviceNotification { display:none; } }
  • TCooper
    TCooper about 6 years
    @Sander Schaeffer I know this is old, but do you mind if I copy your image without attribution and for commercial use?
  • Sander Schaeffer
    Sander Schaeffer about 6 years
    @TCooper Hey :) in all honesty, I'm not even sure I made this (and thus own it). It's too long ago. Do a quick reverse Google image search and if there are no results, at least you have my permission if the case is I own the image :) nevertheless, a similar thing can be made in two minutes in Photoshop, but if that's not part of your skillset, copy something good instead of creating something bad ;) so in short: go ahead!
  • Sander Schaeffer
    Sander Schaeffer about 6 years
    @TCooper I made a quick edit on my answer through my phone, so didn't elaborate much. But as I wrote, I'd suggest to use css media queries instead of Javascript. Can't tell out of my head the 'Succes rate' of targeting every landscape situation is equal, but as far as I know it should work equally, whilst offering a more lightweight and configurable option (CSS).
  • TCooper
    TCooper about 6 years
    I ended up using php to detect user agent, then outputting the media queries in css if it was mobile/tablet, realized this also popped up when someone was resizing their desktop window, which at least for me, wasn't the right functionality