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?

score 114 · Accepted Answer · edited Jan 26 '20 at 10:22

114

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.

edited Jan 26 '20 at 10:22

Luca Fagioli

12,722
5
59
57

answered Jan 16 '13 at 14:31

Rémi Breton

4,209
2
22
34

Webapps too? _______________________ – user1599537 Jan 16 '13 at 14:33
1

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. – Rémi Breton Jan 16 '13 at 14:37
2

As per caniuse.com, manifests can be used since Android 4.1. See http://caniuse.com/#feat=offline-apps – Rémi Breton Jan 21 '15 at 19:48
1

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. – Ian Steffy Feb 22 '16 at 12:07
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. – Rémi Breton Mar 02 '16 at 16:59
3

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. – drskullster May 30 '17 at 10:08
2

@RémiBreton - are you still looking for that info, so you ca update? We've been waiting patiently for *years!* – ashleedawg Feb 18 '19 at 11:54
1

Doesn't work on Safari in 2022 – Cybernetic Dec 20 '22 at 05:19
(2023) Doesn't seem to work on iOS chrome. – ZYinMD Apr 11 '23 at 21:25

score 54 · Answer 2 · edited Sep 10 '15 at 11:15

54

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

edited Sep 10 '15 at 11:15

ngrashia

9,869
5
43
58

answered Feb 12 '15 at 20:24

Crowbar

671
5
7

This method is more easy to implement, while comparing with the others. – Sarin Jacob Sunny Jun 29 '17 at 06:14
4

Doesn't work on Android using default internet browser (not chrome) - any ideas? – Antonios Tsimourtos Mar 08 '18 at 13:15
13

Not implemented for Safari (iOS and macOS): https://caniuse.com/#feat=screen-orientation – MBach May 03 '18 at 09:31
7

Just a quick note, this only works after entering fullscreen mode. – Thane Brimhall Dec 03 '18 at 18:42
3

This method is discouraged by Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Also it has a very poor browser compatibility – Fernando Garcia Aug 08 '19 at 17:05
1

This even not work in full screen mode in chrome :| – Shamshirsaz.Navid Mar 07 '20 at 19:36

score 50 · Answer 3 · edited Feb 19 '20 at 17:29

50

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

edited Feb 19 '20 at 17:29

php_nub_qq

15,199
21
74
144

answered Sep 22 '19 at 02:34

pomber

23,132
10
81
94

3

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)` – ymz Oct 20 '19 at 00:44
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`). – lfarroco Dec 23 '19 at 23:51
1

Thanks. I have been looking for something like this. – underdog Feb 23 '20 at 22:55
How I could apply it only on a single page through page-id-xxx? – Homer May 17 '20 at 13:13
4

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. – tomer raitz Dec 16 '20 at 15:26
@Homer 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` – Miro Sep 16 '21 at 00:25
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 – Luca Jul 14 '22 at 12:43
Best answer. The only one that is truly cross device/browser compatible. Manifest approaches still lack support. – Cybernetic Nov 26 '22 at 01:14
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. – ZYinMD Apr 07 '23 at 21:14

score 1 · Answer 4 · edited Mar 07 '20 at 11:42

I had the same problem, it was a missing manifest.json file, if not found the browser decide with orientation is best fit, if you don't specify the file or use a wrong path.

I fixed 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 content:

{
  "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!

Force “landscape” orientation mode

4 Answers4

Linked

Related