How to Force a Web App to Run in Landscape Mode?

How to Enforce Landscape Mode in Web Applications

Despite the inherent flexibility of mobile devices to adapt to various orientations, it may be necessary to restrict certain applications to a specific orientation. Here's how you can enforce "landscape" mode for your application.

1. Device Orientation Detection

Previously, it was impossible to lock the orientation of web applications. However, with CSS3 media queries, developers can detect the device orientation and apply different CSS styles accordingly:

@media screen and (orientation:portrait) {
    /* Portrait mode styles */
}

@media screen and (orientation:landscape) {
    /* Landscape mode styles */
}

Or, using JavaScript:

document.addEventListener("orientationchange", (e) => {
    if (window.orientation === 0 || window.orientation === 180) {
        /* Portrait mode */
    } else {
        /* Landscape mode */
    }
});

2. HTML5 Webapp Manifest

As of November 12, 2014, the HTML5 webapp manifest provides a means to force the orientation mode. In the manifest.json file, you can include the following:

{
    "display": "landscape",
    "orientation": "landscape",
    ...
}

Then, include the manifest in your HTML file:

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

Note that support for the webapp manifest's orientation lock feature may vary across browsers. Chrome has been confirmed to provide this functionality.

The above is the detailed content of How to Force a Web App to Run in Landscape Mode?. For more information, please follow other related articles on the PHP Chinese website!