3 Ways to Lock Screen Orientation With CSS & JS

Welcome to a tutorial on how to lock the screen orientation. So you have a website or web application that you wish to lock the orientation. The strange part is that native Android/iOS apps are able to do it, and the bad news is that there is not a “smart way” to do it with web pages. Well, here is a compilation of how to lock the screen orientation that I have found all over the Internet:

  1. Use the Javascript screen.orientation.lock() API function.
  2. Use CSS transform: rotate(90 deg) on the orientation that you don’t want.
  3. Show a “please rotate screen” message on the orientation that you don’t want.

Just how does each one of these work? Let’s walk through some examples, read on to find out!

ⓘ I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Notes Orientation Lock API CSS Rotation
Rotate Message Summary The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTE

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

ORIENTATION LOCK API

For you guys who are looking for the “smart” way of locking the screen orientation, you are in luck but not really. There is a Javascript screen orientation API, but please take note that as at the time of writing, this API is only a working draft – Meaning, it’s experimental and may not work on every browser.

 

REQUIRES FULL SCREEN!

Take extra note – I have tried to lock the orientation on my Android phone using both Chrome and Firefox. Both of them worked, but with a caveat. It must be engaged in full-screen mode before the orientation lock will even set in place.

 

THE HTML

1-lock.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS Orientation Lock</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="1-lock.js"></script>
  </head>
  <body>
    <h1>LOCK PORTRAIT</h1>
    <input type="button" value="Lock - portrait" onclick="lock('portrait')"/>
    <input type="button" value="Lock - portrait-primary" onclick="lock('portrait-primary')"/>
    <input type="button" value="Lock - portrait-secondary" onclick="lock('portrait-secondary')"/>

    <h1>LOCK LANDSCAPE</h1>
    <input type="button" value="Lock - landscape" onclick="lock('landscape')"/>
    <input type="button" value="Lock - landscape-primary" onclick="lock('landscape-primary')"/>
    <input type="button" value="Lock - landscape-secondary" onclick="lock('landscape-secondary')"/>

    <h1>UNLOCK</h1>
    <input type="button" value="Unlock Orientation" onclick="unlock()"/>
  </body>
</html>

 

 

THE JAVASCRIPT

When it comes to locking the screen orientation using Javascript, there are only two functions that do the magic – screen.orientation.lock(ORIENTATION) and screen.orientation.unlock(). Should be pretty self-explanatory:

1-lock.js
function lock (orientation) {
  // Go into full screen first
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();
  }

  // Then lock orientation
  screen.orientation.lock(orientation);
}

function unlock () {
  // Unlock orientation
  screen.orientation.unlock();
 
  // Exit full screen
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

Yep, it works… But irritatingly requires the web page to be in full-screen mode. Still, it may be useful for locking full-screen videos and stuff.

 

THE “CSS ROTATION” TRICK

This method that I have found seems to be one of the most common solutions. It is basically a clever little CSS trick that simply rotates the body 90 degrees in the orientation that you don’t want. For example, if you want to display the page in landscape, you will CSS rotate the screen 90 degrees in the portrait orientation.

 

THE HTML

2-rotate.html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Rotation Trick</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="2-rotate.css" rel="stylesheet">
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
    Nunc quis aliquam sem. <br>
    Duis sodales nibh sed justo posuere consequat. <br>
    Ut at posuere nibh, a placerat mauris. Proin ut lobortis risus. <br>
    Phasellus et nisl libero. <br>
    Quisque blandit ante vel neque dapibus commodo. <br>
    Vivamus non arcu ut lorem hendrerit ornare nec at nisl. <br>
    Praesent id risus placerat, mattis diam sit amet, ultricies tortor. 
  </body>
</html>

 

 

THE CSS

2-rotate.css
@media only screen and (orientation:portrait){
  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}

Yep, this CSS will force the users to rotate the device to the landscape orientation, or visit your website with an uncomfortable 90 degrees head turn… Well, this is not the most elegant way to solve the problem, but it works.

 

THE RESULT

 

THE ROTATE MESSAGE

Following up with the above method, this is another way that I do not know whether to call elegant or not. It basically has 2 HTML containers – One with a “please rotate device” message and one for your main contents.

So, on the orientation that you want, you will hide the “rotate device” message and show the main contents. On the orientation that you do not want, you do the opposite to show the “rotate device” message and hide the main contents.

 

THE HTML

3-message.html
<!DOCTYPE html>
<html>
  <head>
    <title>Rotate Message</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="3-message.css" rel="stylesheet">
  </head>
  <body>
    <div id="turn">
      Please rotate your device!
    </div>
    <div id="container">
      Main contents here.
    </div>
  </body>
</html>

 

 

THE CSS

3-message.css
@media only screen and (orientation:landscape){
  #turn{ display:block; }
  #container{ display:none; }
}
@media only screen and (orientation:portrait){
  #turn{ display:none; }
  #container{ display:block; }
}

 

THE RESULT

 

 

USEFUL BITS & LINKS

Finally, here is a summary of the methods, and some links that may be useful to you.

 

THE SUMMARY

Orientation Lock Functions
Function Description Reference Link
screen.orientation.lock() Locks the screen in the given orientation. Click Here
screen.orientation.unlock() Unlocks the orientation. Click Here
NODE.requestFullscreen() Requests for full-screen mode. Click Here
document.exitFullscreen() Exits full-screen mode. Click Here
Orientation Lock Directions
Orientation Direction
portrait or

Note – Tested this on Android Chrome, only locked upright.

portrait-primary
portrait-secondary

Note – Tested this on Android Chrome, only locked upright again.

landscape or
landscape-primary
landscape-secondary
CSS
Property / Feature Description Reference Link
transform: rotate(DEG) Rotate the element. Click Here
orientation: portrait | landscape Target the screen orientation. Click Here

 

 

EXTRA – FOR PHONEGAP WEB APPS

If you are developing a web app using Phonegap, you can laugh all the way. Because the solution to locking the orientation is as easy as adding a preference line in the config.xml file.

<preference name="orientation" value="landscape" /> 

 

YOUTUBE TUTORIAL

 

THE CHEAT SHEET

How to lock screen orientation with JS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope it has helped you with your project. Orientation locking is still kind of rough when it comes to websites, so if you have better solutions to share, please feel free to comment below. Good luck and happy coding!

4 thoughts on “3 Ways to Lock Screen Orientation With CSS & JS”

Leave a Comment

Your email address will not be published. Required fields are marked *