在某些场景下，我们可能希望移动端页面只能横屏显示，例如游戏、视频等应用。本文将介绍如何使用前端技术实现强制页面横屏。
方案一：使用 CSS transform
CSS 的 transform 属性可以旋转元素，通过将页面主体元素旋转 90 度，可以达到强制横屏的效果。代码示例：
body {
transform: rotate(-90deg);
transform-origin: right top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
}上述代码将页面主体元素（body）向左旋转 90 度，并设置旋转中心为右上角。同时将宽和高交换，以适应横屏显示。最后禁止水平滚动，确保页面始终呈现横屏状态。
然而，在实际使用中，这种方案存在一些问题：
- 在 iOS 设备上，需要通过 Safari 浏览器打开才能生效；
- 在部分浏览器（如 Chrome）中，页面内容会被裁剪；
- 页面初始加载时会出现闪烁等体验问题。
方案二：使用 JavaScript 监听屏幕方向
另一种方法是使用 JavaScript 监听屏幕方向，当屏幕处于纵向时，提示用户旋转屏幕；当屏幕处于横向时，显示页面内容并禁止旋转。代码示例：
-- -------------------- ---- -------
-------- ------------------ -
----- ----------- - -------------------
-- ------------ --- - -- ----------- --- ---- -
-- --
--------------------------
- ---- -
-- --
---------------------------- - ---------
---------------
-
-
-------- -------------- -
----- ---- - --------------
----- -------- - -- -- -
-- ------------------ - ------------------- -
-------------------------------------- ----------
------------------- - ---
-
--
----------------------------------- --------- - -------- ----- ---
-
-------------------
-- --------
-------------------------------------------- -- -- -
-------------------
---如上代码所示，首先通过 window.orientation 获取屏幕当前方向，然后根据不同方向执行不同操作。当屏幕为纵向时，使用 alert 提示用户旋转屏幕；当屏幕为横向时，隐藏滚动条并解除页面锁定，使页面可以正常显示。
需要注意的是，在 iOS 设备上，如果页面中存在视频等全屏元素，建议在退出全屏后重新检查屏幕方向，以保证页面呈现正确方向。
结语
以上就是移动端强制横屏的两种方法，选择哪种方式取决于具体场景和需求。在实际使用中，还需要考虑浏览器兼容性、用户体验等因素。希望本文对您有所启发，感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5009