Screen Orientation API 仅能请求方向锁定而非强制改变设备物理朝向，是否生效取决于平台策略与用户上下文；必须由真实用户手势触发、不可延迟调用，且安卓浏览器通常要求先全屏再锁定，iOS则完全不支持需彻底降级。
Screen Orientation API 不能“强制”改变设备物理状态，它只是向浏览器发起一个方向锁定请求，是否生效完全取决于平台策略和用户上下文。异步锁定的关键不在于 Promise 写法本身，而在于严格满足触发条件、预判失败路径，并主动接管旋转感知逻辑。
必须由用户手势触发，且不可延迟
调用 screen.orientation.lock() 必须绑定在真实的用户交互事件中，比如 click、touchend 或 pointerup。以下写法全部无效：
- 页面加载完成时自动执行（
DOMContentLoaded或window.onload） - 通过
setTimeout、Promise.resolve().then()等方式“模拟”用户上下文 - 在 AJAX 回调、WebSocket 消息或定时器中触发
正确做法是提供一个明确按钮，例如“进入全屏模式”，点击后才尝试锁定：
document.getElementById('lockBtn').addEventListener('click', async () => {
try {
await screen.orientation.lock('portrait');
} catch (err) {
console.warn('锁定未成功：', err.name);
}
});
多数安卓浏览器要求先全屏，再锁定
Chrome for Android、Edge for Android、Samsung Internet 等主流移动浏览器，仅在全屏状态下允许方向锁定。顺序错误或并行调用会导致静默失败或 NotAllowedError：
- ❌ 错误：先调
lock()，再调requestFullscreen() - ❌ 错误：两个 Promise 并发执行，未等待全屏完成
- ✅ 正确：全屏成功后再调
lock()，并监听fullscreenchange事件确保时机
推荐封装为链式流程：
async function enterFullscreenAndLock() {
try {
await document.body.requestFullscreen();
await screen.orientation.lock('landscape');
} catch (err) {
// 处理全屏失败或锁定失败
}
}
主动读取与响应原始旋转行为
即使锁定失败，你仍可通过 screen.orientation.type 和 screen.orientation.angle 实时感知设备朝向，并配合 CSS 媒体查询或 DOM 变换做出响应：
-
type返回如"landscape-primary"、"portrait-secondary"等字符串，反映当前逻辑方向 -
angle返回 0、90、180、270，表示逆时针旋转角度，比 type 更精确，适合做平滑过渡 - 监听
screen.orientation.onchange或addEventListener('change', ...)获取方向变化通知
例如，在横屏时显示旋转提示层：
function handleOrientationChange() {
if (screen.orientation.type.includes('landscape')) {
document.body.classList.add('is-landscape');
} else {
document.body.classList.remove('is-landscape');
}
}
screen.orientation.addEventListener('change', handleOrientationChange);
handleOrientationChange(); // 初始化
iOS Safari 完全不支持锁定，需彻底降级
iOS 上 screen.orientation.lock() 始终抛出 NotSupportedError 或静默失败，screen.orientation 本身也常为 null 或只读空对象。任何依赖该 API 的核心逻辑都应被剥离：
- 不要在 iOS 上尝试调用
lock()，直接跳过或走降级分支 - 用
matchMedia('(orientation: landscape)')检测横屏，并展示引导文案或旋转图标 - 对关键内容（如表单、视频播放器），默认按竖屏设计，而非等待锁定成功后再渲染
- 若为 PWA，可借助
display: "standalone"提升沉浸感，但无法绕过方向限制
兼容性检测应前置：
if ('orientation' in screen && 'lock' in screen.orientation) {
// 尝试锁定
} else {
// 启用 CSS + 提示层降级方案
} 
