javascriptcssdevice-orientation

Force “landscape” orientation mode

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?

Solution

  • 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.