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?

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.