Force “landscape” orientation mode

Question

I'm trying to force the "landscape" mode for my application because my application is absolutely not designed for the "portrait" mode. How can I do that?

Scenic

Answer 1

It is now possible with the HTML5 webapp manifest. See below.

---

Original answer:

You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.

You can detect the device orientation with CSS3 media queries like this:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Or by binding a JavaScript orientation change event like this:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

---

Update on November 12, 2014: It is now possible with the HTML5 webapp manifest.

As explained on html5rocks.com, you can now force the orientation mode using a manifest.json file.

You need to include those line into the json file:

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

And you need to include the manifest into your html file like this:

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

Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.

Darling

Webapps too? _______________________ – Scenic

Yes, webapps too. Even if you "save" your website to the home screen on the iPhone or the iPad, the webapp will change its orientation. – Morpheme

As per caniuse.com, manifests can be used since Android 4.1. See caniuse.com/#feat=offline-apps – Morpheme

How can I tell if the manifest is being called? It's not working for me and nothing shows to be loaded in Network of my development tools despite the manifest being in the same place as the index.html where it is linked. – Cozen

This is a great question. I have not heard of a way to confirm if the manifest file is really being called. Let me know if you find it. – Morpheme

In Chrome you can now check the "Application" tab in Inspect mode, there's a "Manifest" page with a direct link to your json file and info about it. – Damselfly

@RémiBreton - are you still looking for that info, so you ca update? We've been waiting patiently for years! – Petulia

Doesn't work on Safari in 2022 – Artiodactyl

(2023) Doesn't seem to work on iOS chrome. – Younker

For me, this doesn't work Chrome and Safari. both ios and android. any help? – Bacchius

Answer 2

screen.orientation.lock('landscape');

Will force it to change to and stay in landscape mode. Tested on Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples

Beersheba

This method is more easy to implement, while comparing with the others. – Sheepfold

Doesn't work on Android using default internet browser (not chrome) - any ideas? – Jewess

Not implemented for Safari (iOS and macOS): caniuse.com/#feat=screen-orientation – Sansen

Just a quick note, this only works after entering fullscreen mode. – Ashford

This method is discouraged by Mozilla: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Also it has a very poor browser compatibility – Microsporangium

This even not work in full screen mode in chrome :| – Dialectician

Answer 3

I use some css like this (based on css tricks):

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

Hemolysis

I used this answer.. all I have to do is to change media query from landscape to portrait and it works as expected @media screen and (orientation: portrait) – Forsythe

Edited the answer to help future folks. The rotation should be applied when the current mode is portrait (so that it may switch to landscape). – Ferreby

Thanks. I have been looking for something like this. – Approximate

How I could apply it only on a single page through page-id-xxx? – Affiliation

thank you for this! I found that you need to change every vh to vw and vw to vh in all the CSS files (in portrait mode)... so if somebody didn't succeed it probably because of it. – Encircle

@Affiliation you can use html:has(#page-id-xx) to target it. It's like a pseudo-parent selector. Or you can add the id to the html tag and target with html#page-id-xx – Cadmium

This is the only solution that works for me. could you tell me how to implement it from the opposite side? that is, now it rotates it pointing to the right, I would like it to point to the left – Brightwork

Best answer. The only one that is truly cross device/browser compatible. Manifest approaches still lack support. – Artiodactyl

Warning: if you use vw anywhere in your css, things will mess up, because when the device switches between portrait and landscape, vw will have different values, while your app always displays horizontally. – Younker

Why do you need (min-width: 320px) and (max-width: 767px)? – Kalvin

Answer 4

I had the same problem, it was a missing manifest.json file.
If not found, like if you don't specify the file or use a wrong path, the browser decides which orientation fits best.

I fixed it by just calling the manifest.json correctly on html headers.

My html headers:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

And the manifest.json file:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

To generate your favicons and icons use this webtool: https://realfavicongenerator.net/

To generate your manifest file use: https://tomitm.github.io/appmanifest/

My PWA Works great, hope it helps!

Autorotation