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.
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!