Can You Force Landscape Orientation for Web Applications?

Forcing Landscape Orientation for Applications

Question: Forcing an application to display in "landscape" mode, despite being designed for "portrait" mode, is a concern that often arises. How can this be achieved?

Original Answer:

Unfortunately, it is not possible to constrain a website or web application to a specific orientation. This limitation exists to preserve the inherent user experience of the device. However, you can employ the following methods to detect the current orientation:

• CSS3 Media Queries:

@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 */
}

• JavaScript Orientation Change Event:

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

Updated Answer (November 12, 2014):

With the advent of the HTML5 webapp manifest, forcing orientation mode is now possible. This can be achieved by:

• Creating a manifest.json file and including the following lines:

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

• Referencing the manifest in your HTML file:

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

Note that support for the webapp manifest for locking orientation may vary across browsers.

The above is the detailed content of Can You Force Landscape Orientation for Web Applications?. For more information, please follow other related articles on the PHP Chinese website!