How to Control Screen Orientation in Mobile Web Applications?

Controlling Orientation in Mobile Web Applications

Introduction

When designing websites for mobile devices, it is often desirable to have control over the user's screen orientation. This is particularly important for applications that require a specific orientation for optimal user experience, such as games or video playback.

Mobile Stylesheet and jQuery for Detecting Mobile Devices

The provided snippet demonstrates how to use a mobile stylesheet and jQuery to detect mobile devices and adjust functionality accordingly. This approach is effective for basic device detection and functionality modifications.

Forcing Landscape Orientation and Disabling Auto-Rotation

To specifically force landscape-only orientation and disable auto-rotation, media queries can be employed. Here's how:

<code class="css">@media screen and (orientation: landscape) {
  /* Landscape CSS rules here */
}

@media screen and (orientation: portrait) {
  body {
    display: none;
  }
  #message {
    display: block;
  }
}</code>

In this media query, all elements are hidden when the device is in portrait orientation, and a message is displayed instead. This ensures that the application is locked to landscape mode and auto-rotation is prevented.

Additional Approaches

Another method to control orientation is through the JavaScript orientation API, which allows direct manipulation of the device's orientation preference. However, this approach may not be as reliable or supported on all devices.

The above is the detailed content of How to Control Screen Orientation in Mobile Web Applications?. For more information, please follow other related articles on the PHP Chinese website!