移动端如何强制页面横屏

在某些场景下，我们可能希望移动端页面只能横屏显示，例如游戏、视频等应用。本文将介绍如何使用前端技术实现强制页面横屏。

方案一：使用 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 监听屏幕方向，当屏幕处于纵向时，提示用户旋转屏幕；当屏幕处于横向时，显示页面内容并禁止旋转。代码示例：

// www.javascriptcn.com code example
function checkOrientation() {
  const orientation = window.orientation;
  if (orientation === 0 || orientation === 180) {
    // 纵向
    alert('请将屏幕横向，以获得更好的体验！');
  } else {
    // 横向
    document.body.style.overflow = 'hidden';
    unlockScreen();
  }
}

function unlockScreen() {
  const body = document.body;
  const listener = () => {
    if (window.innerWidth > window.innerHeight) {
      body.removeEventListener('touchstart', listener);
      body.style.overflow = '';
    }
  };
  body.addEventListener('touchstart', listener, { passive: false });
}

checkOrientation();

// 监听屏幕方向变化
window.addEventListener('orientationchange', () => {
  checkOrientation();
});

如上代码所示，首先通过 window.orientation 获取屏幕当前方向，然后根据不同方向执行不同操作。当屏幕为纵向时，使用 alert 提示用户旋转屏幕；当屏幕为横向时，隐藏滚动条并解除页面锁定，使页面可以正常显示。

需要注意的是，在 iOS 设备上，如果页面中存在视频等全屏元素，建议在退出全屏后重新检查屏幕方向，以保证页面呈现正确方向。

结语

以上就是移动端强制横屏的两种方法，选择哪种方式取决于具体场景和需求。在实际使用中，还需要考虑浏览器兼容性、用户体验等因素。希望本文对您有所启发，感谢阅读！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/5009