Enhancing Mobile Site Experience: Enforcing Landscape Orientation and Disabling Auto-rotation

When designing for mobile responsiveness, certain orientations can significantly impact the user experience. This question seeks a solution to restrict a mobile website to landscape orientation and disable auto-rotation.

CSS Solution

One way to achieve this is through CSS media queries. By creating separate stylesheets for landscape and portrait orientations, you can control how the site behaves depending on the device's orientation. Here's how to implement it:

1. Create two stylesheets: style_l.css for landscape and style_p.css for portrait.
2. In style_l.css, include your landscape-specific styles that display the site's content in full width.
3. In style_p.css, hide all elements and display a message instructing users to tilt their device for optimal viewing.
4. Add the following code to your HTML head section to use media queries:

jQuery Solution

jQuery can also be employed to detect device orientation and alter the site's functionality accordingly. Here's an example:

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

Both solutions effectively enforce landscape-only orientation and disable auto-rotation on the mobile site, enhancing the user's experience by ensuring optimal content display in the intended orientation.