HTML5全屏后如何禁止旋转_HTML5锁定屏幕方向API使用说明【方法】

screen.orientation.lock() 不生效的主因是触发时机错误、浏览器兼容性差及ios不支持；须在用户手势中调用，先检测api存在性，await捕获notallowederror/notsupportederror，并注意全屏与锁定的执行顺序。

screen.orientation.lock() 不生效的常见原因

直接调用 screen.orientation.lock() 失败，多数不是 API 本身有问题，而是触发时机或权限条件没满足。

• 必须在用户手势（如 click、touchend）回调中首次调用，不能在页面加载完成、定时器或异步请求回调里直接执行
• 部分安卓 webview（尤其旧版 UC、QQ 浏览器）根本不支持该 API，screen.orientation 可能为 undefined，需先判断存在性
• iOS Safari 完全不支持 lock()，连 screen.orientation 都是只读空对象，任何锁定尝试都会静默失败
• 如果页面已处于横屏，再锁 "portrait" 可能被系统忽略——iOS 和部分安卓厂商定制系统会优先尊重用户物理旋转行为

如何安全地尝试锁定方向（兼容性写法）

不要假设 API 一定可用，得兜底、降级、报错都做清楚。

• 先检查 screen.orientation 是否存在且含 lock 方法：if ("orientation" in screen && typeof screen.orientation.lock === "function")
• 锁方向前建议先用 screen.orientation.type 获取当前值，避免重复调用或冲突（比如当前已是 "landscape-primary" 却还去锁 "landscape"）
• 调用 lock() 必须 await 或接 .then()，失败时 catch 到具体错误：常见 "NotAllowedError"（非用户手势触发）、"NotSupportedError"（浏览器不支持）
• android chrome 90+ 支持 "natural" 值，但实际效果等同于 "portrait"，不建议依赖

button.addEventListener("click", async () => {   try {     await screen.orientation.lock("portrait");   } catch (err) {     console.warn("锁定失败:", err.name); // NotAllowedError / NotSupportedError   } });

全屏 + 锁定方向的组合陷阱

全屏（element.requestFullscreen()）和方向锁定不是原子操作，顺序和时机错一点就白忙。

• 必须先进入全屏，再调用 screen.orientation.lock()；反过来或并行调用大概率失败
• 全屏成功后，要监听 fullscreenchange 事件，在事件回调里再锁方向，否则可能因全屏尚未真正生效而被拒绝
• 退出全屏时，务必手动调用 screen.orientation.unlock()，否则即使页面退出全屏，方向仍被“卡”住（尤其 Android Chrome）
• 某些 PWA 环境下，display: "standalone" 会绕过部分方向限制，但无法替代 API 锁定

iOS 上为什么永远锁不住？

这不是你代码的问题，是 Apple 的明确设计决策：iOS safari 不暴露方向锁定能力，也不响应 lock() 调用。

立即学习“前端免费学习笔记（深入）”；

• screen.orientation 在 iOS 上始终是 NULL 或空对象，所有方法调用都无效
• 没有替代 API，viewport 的 orientation meta 属性早已被废弃且无效
• 唯一可做的，是 CSS 层面用 @media (orientation: landscape) 隐藏/禁用横屏内容，配合提示文案引导用户转回竖屏
• 如果你的应用强依赖横竖屏隔离（比如扫码、AR），iOS 必须接受“无法强制锁定”，只能优化体验容忍度

实际项目里最常被忽略的，是把 screen.orientation.lock() 当成同步开关来用，而它本质是个异步权限请求——失败不抛异常、不提示、不回退，全靠你主动检查和兜底。