Force “landscape” orientation mode

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.

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

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