How to Enforce Landscape Orientation on a Mobile Website?

Mobile Site: Enforcing Landscape-Only Orientation

How can you prevent auto-rotation and force landscape orientation on a mobile website? This question arises when developing a site with a "mobile-first" approach.

To address this issue, media queries can be utilized. The following CSS code snippet demonstrates the implementation:

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

In the provided code, two separate stylesheets are specified.

• style_l.css: This stylesheet is applied when the screen is in landscape orientation. It contains the necessary styles to display the content in the desired landscape layout.
• style_p.css: This stylesheet is applied when the screen is in portrait orientation. It can be used to hide or disable specific elements or display a message indicating that the app is designed for landscape mode only.

By implementing this approach, you can ensure that your mobile site is locked in landscape orientation, preventing users from accidentally rotating their devices and potentially experiencing a distorted or unusable interface.

The above is the detailed content of How to Enforce Landscape Orientation on a Mobile Website?. For more information, please follow other related articles on the PHP Chinese website!