Screen Orientation API 的屏幕方向锁定仅在特定环境有效：Android 上 Chrome/Edge 全屏或用户手势触发时支持，iOS Safari 不支持，桌面浏览器通常忽略；需用户交互触发并捕获 NotAllowedError 等错误，结合 CSS 媒体查询、旋转提示和全屏模式降级使用。
Screen Orientation API 可以让网页主动请求锁定屏幕方向（如强制横屏或竖屏），但实际支持和行为因浏览器、平台和使用场景而异，不能无条件生效。
哪些环境支持锁定？
目前仅部分现代浏览器在特定条件下支持 screen.orientation.lock()：
- Chrome（Android）和 Edge（Android）：需在全屏模式下或通过用户手势触发（如点击按钮），且页面需为 HTTPS
- iOS Safari：不支持锁定方向，
lock()方法始终抛出错误或静默失败 - 桌面浏览器（Chrome/Firefox）：通常忽略锁定请求，仅允许读取当前方向（
screen.orientation.type） - PWA（添加到主屏幕的 Web 应用）：Android 上更可能成功；iOS 仍受限
如何安全调用 lock()？
必须由用户交互（如 click、touchend）触发，并做好错误处理：
button.addEventListener('click', async () => {
try {
await screen.orientation.lock('landscape');
console.log('已锁定为横屏');
} catch (err) {
console.warn('锁定失败：', err.name); // 如 "NotSupportedError"、"NotAllowedError"
}
});
常见错误类型：
立即学习“Java免费学习笔记（深入）”；
- NotAllowedError：未由用户手势触发，或页面未聚焦
- NotSupportedError：浏览器根本不支持该方向或 API
- InvalidStateError：设备已处于该方向且无法“重新锁定”（较少见）
替代方案与实用建议
当 lock() 不可用时，可结合以下方式提升体验：
- 检测方向变化，用 CSS 媒体查询 +
transform模拟横屏布局（如旋转容器） - 显示提示层引导用户手动旋转设备（监听
screen.orientation.onchange或window.orientation） - 对关键操作（如视频播放、游戏）优先启用全屏模式（
element.requestFullscreen()），再尝试锁定，成功率更高 - 始终提供退出锁定的按钮（调用
screen.orientation.unlock()），避免用户卡死
注意兼容性边界
不要依赖锁定成功来控制核心逻辑。例如：
- 横屏视频页，应默认按横屏设计布局，而非等 lock() 成功后再渲染
- 游戏初始化不应阻塞在
lock()上，而应降级为响应式适配 - 检查 API 存在性：
if ('orientation' in screen && 'lock' in screen.orientation)
不复杂但容易忽略：锁定是提示性能力，不是强制系统行为。尊重平台限制，以检测+引导+优雅降级为主轴，才能保证跨设备体验一致。
