js禁止横竖屏切换

在JavaScript中禁止横竖屏切换，可以通过监听屏幕方向变化事件并阻止其默认行为来实现。以下是实现这一功能的详细步骤和示例代码：

基本概念

屏幕方向变化事件主要有两种：

orientationchange 事件：当设备的屏幕方向发生变化时触发。
resize 事件：当浏览器窗口大小发生变化时触发，也可以用来检测屏幕方向的变化。

实现方法

监听 orientationchange 事件：
- 使用 window.addEventListener 监听 orientationchange 事件。
- 在事件处理函数中，通过设置 screen.orientation.lock 来锁定当前屏幕方向。

监听 resize 事件：
- 使用 window.addEventListener 监听 resize 事件。
- 在事件处理函数中，通过判断窗口的宽高比来确定当前屏幕方向，并锁定该方向。

示例代码

以下是一个完整的示例代码，展示了如何禁止横竖屏切换：

// 锁定屏幕方向的函数
function lockScreenOrientation() {
  if (screen.orientation && screen.orientation.lock) {
    // 锁定当前屏幕方向
    screen.orientation.lock(screen.orientation.type).catch(err => {
      console.error('屏幕方向锁定失败:', err);
    });
  } else {
    // 兼容旧版本浏览器，使用 resize 事件
    window.addEventListener('resize', function() {
      if (window.innerHeight > window.innerWidth) {
        // 竖屏
        document.body.style.transform = 'rotate(0deg)';
      } else {
        // 横屏
        document.body.style.transform = 'rotate(90deg)';
      }
    });
  }
}

// 监听 orientationchange 事件
window.addEventListener('orientationchange', lockScreenOrientation);

// 初始化时锁定屏幕方向
document.addEventListener('DOMContentLoaded', lockScreenOrientation);