How to Force Landscape Orientation and Disable Auto-Rotate on Mobile Websites?

Force Landscape Orientation on Mobile Site

In a modern mobile-centric web development era, it is crucial to optimize user experience for all devices and orientations. This question explores the means to disable auto-rotate and enforce landscape-only orientation on a mobile site.

CSS Solution

One approach is to utilize media queries to test the device's orientation. In the portrait stylesheet, you can hide all content and display a message indicating that the app only functions in landscape mode. For example:

<code class="css">@media screen and (orientation: portrait) {
  body {
    display: none;
  }

  .orientation-message {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 100px;
  }
}</code>

jQuery Solution

Alternatively, you can use jQuery to check the device's orientation and dynamically adjust the page layout accordingly. Here's a sample script:

<code class="javascript">$(function() {
  var orientation = window.orientation;

  if (orientation == 0 || orientation == 180) {
    // Landscape mode
    $('body').css('transform', 'rotate(0)');
  } else {
    // Portrait mode
    $('body').css('transform', 'rotate(-90deg)');
  }
});</code>

This script checks the window.orientation property, which indicates the device's current orientation. Based on the value (0 or 180 for landscape, 90 or -90 for portrait), it rotates the page's content using CSS transforms.

The specific solution you choose depends on your preferences and the capabilities of your target devices. Both the CSS and jQuery approaches provide effective means to force landscape orientation and disable auto-rotate on mobile sites.

The above is the detailed content of How to Force Landscape Orientation and Disable Auto-Rotate on Mobile Websites?. For more information, please follow other related articles on the PHP Chinese website!