Can I Force Landscape Orientation for My Web App?

Force Landscape Orientation Mode for Web Applications

Question:

How can I enforce landscape mode for my web application that is not designed for portrait orientation?

Answer:

While it was previously impossible to lock a web application to a specific orientation, advances in HTML5 now make it possible.

Original Answer:

The original answer stated that locking a website or application to a specific orientation was not possible because it conflicted with the device's natural behavior. However, it provided methods for detecting device orientation using CSS3 media queries and JavaScript orientation change events.

Updated Answer (November 12, 2014):

With the introduction of the HTML5 webapp manifest, developers can now force the orientation mode for their applications. This is done by including the following lines in the manifest.json file:

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

Additionally, the manifest.json file must be referenced in the HTML file using:

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

While the exact browser support for locking orientation mode via the webapp manifest is still unclear, Chrome is known to support it.

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