Screen Orientation API 的 lock() 方法仅在全屏模式或PWA且HTTPS+用户手势触发时有效；普通网页调用大概率失败，需降级适配。
Screen Orientation API 的 lock() 方法是否可用
现代浏览器中，ScreenOrientation.lock() 仅在**全屏模式下或安装为 PWA 且满足安全上下文条件时才真正生效**。普通网页调用 screen.orientation.lock('landscape') 大概率静默失败或抛出 NotAllowedError —— 这不是你代码写错了，而是浏览器策略限制。
实际能触发锁定的两个必要条件
缺一不可：
- 页面必须运行在 HTTPS 协议下（
http://localhost是例外，但http://127.0.0.1不行） - 用户操作上下文（user gesture）内调用：比如在
click、touchend回调里执行，不能放在DOMContentLoaded或定时器中
示例正确调用方式：
button.addEventListener('click', () => {
screen.orientation.lock('landscape').catch(err => {
console.warn('Lock failed:', err.name); // 常见：NotAllowedError、NotSupportedError
});
});
landscape 参数的实际行为差异
screen.orientation.lock('landscape') 并不强制横屏，而是允许设备在 landscape-primary 和 landscape-secondary 之间自动旋转（即正横和倒横都接受）。如果你只想固定为「正向横屏」（短边在上），得用 'landscape-primary'；同理，'portrait-primary' 才是正向竖屏。
立即学习“前端免费学习笔记（深入）”；
注意：'landscape' 在部分 Android Chrome 中仍可能被忽略，而 'landscape-primary' 兼容性更稳（Chrome 58+、Edge 79+ 支持）。
降级处理与 fallback 方案
别依赖锁定成功。用户可能拒绝权限、浏览器不支持、或系统设置禁用了方向锁定。务必做降级：
- 检查支持性：
'orientation' in screen和typeof screen.orientation?.lock === 'function' - 监听方向变化：
screen.orientation.addEventListener('change', handler)，动态调整 UI 布局 - 视觉提示：用 CSS
@media (orientation: landscape)配合 JS 检测screen.orientation.type做样式适配
真正可靠的「横屏体验」不是靠锁住屏幕，而是让内容在横屏下可读、可操作，并在方向切换时平滑响应。
很多团队卡在反复调用 lock() 上，其实该花时间优化横屏下的触摸热区、字体大小和滚动逻辑 —— 浏览器不让你锁，自有它的道理。
