锁定屏幕方向后，如何获取WebApp中设备的真实朝向？

我之前在做一款锁定竖屏的拍照类WebApp时，完全碰到过一模一样的问题！当你在manifest里把屏幕锁死在portrait-primary后，deviceOrientation API返回的其实是相对于锁定方向的修正值，根本拿不到设备真实的物理朝向，拍照时要判断横竖屏就完全抓瞎。下面是我踩过坑后总结的几个可行解决方案：

普通的deviceorientation事件会被浏览器根据锁定的屏幕方向做转换，而deviceorientationabsolute返回的是基于地球坐标系的绝对物理朝向，不受屏幕锁定设置的影响。

实现步骤： #

1. 首先请求用户授权访问设备朝向数据（现在主流浏览器都需要手动授权，尤其是iOS）
2. 监听deviceorientationabsolute事件，通过返回的beta（前后倾斜角度）和gamma（左右倾斜角度）判断真实朝向

// 处理权限请求（iOS专属逻辑）
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
  // 必须通过用户交互触发，比如按钮点击
  document.getElementById('request-permission-btn').addEventListener('click', async () => {
    const permission = await DeviceOrientationEvent.requestPermission();
    if (permission === 'granted') {
      startListeningAbsoluteOrientation();
    } else {
      alert('需要开启设备朝向权限才能正常拍照哦');
    }
  });
} else {
  // 安卓/桌面浏览器直接监听
  startListeningAbsoluteOrientation();
}

function startListeningAbsoluteOrientation() {
  window.addEventListener('deviceorientationabsolute', handleRealOrientation);
}

function handleRealOrientation(event) {
  const { beta, gamma } = event;
  
  // 根据角度阈值判断真实朝向（阈值可根据测试调整）
  const isLandscape = Math.abs(gamma) > 60; // 左右倾斜超过60度判定为横屏
  const isPortraitPrimary = beta > 45 && Math.abs(gamma) < 30; // 竖屏正向
  const isPortraitSecondary = beta < -45 && Math.abs(gamma) < 30; // 竖屏反向

  // 这里可以把判断结果传给拍照逻辑
  console.log('设备真实朝向:', isLandscape ? '横屏' : isPortraitPrimary ? '竖屏正向' : '竖屏反向');
}

如果你只需要在拍照场景下获取朝向，可以直接调用相机API，从视频轨道的配置中拿到相机传感器的真实朝向，这个值完全不受屏幕锁定的影响。

async function getCameraRealOrientation() {
  try {
    // 请求相机权限并获取流
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const videoTrack = stream.getVideoTracks()[0];
    const trackSettings = videoTrack.getSettings();

    // orientation值说明：
    // 0 → 传感器与锁定的屏幕方向一致（portrait-primary）
    // 90 → 设备顺时针横屏（右侧朝下）
    // 180 → 设备竖屏反向（上下颠倒）
    // 270 → 设备逆时针横屏（左侧朝下）
    const realOrientation = trackSettings.orientation;
    console.log('相机真实朝向角度:', realOrientation);

    // 用完相机记得停止轨道，避免占用资源
    videoTrack.stop();
    return realOrientation;
  } catch (err) {
    console.error('获取相机失败:', err);
    alert('需要开启相机权限才能获取朝向哦');
    return null;
  }
}

// 调用示例（同样需要用户交互触发）
document.getElementById('take-photo-btn').addEventListener('click', getCameraRealOrientation);

• 必须在HTTPS环境下运行（本地开发的localhost除外），否则浏览器会阻止这些敏感API的访问
• iOS设备的权限请求必须通过用户主动交互触发（比如按钮点击），不能页面加载时自动请求
• 不同设备的角度阈值可能略有差异，建议多在目标设备上测试调整判断逻辑
• 如果用户拒绝权限，一定要给出友好提示，引导用户在系统设置中开启对应权限

内容的提问来源于stack exchange，提问作者Nil Micola