ios safari完全不支持screen orientation api，调用screen.orientation.lock()会抛出notsupportederror或静默失败；仅android chrome、firefox桌面版等支持，且需用户手势触发。
Screen Orientation API 不支持 iOS Safari
直接说结论：iOS Safari（包括所有基于 WebKit 的 iOS 浏览器）完全不支持 screen.orientation.lock()，调用会抛出 NotSupportedError 或静默失败。这不是配置问题，是苹果明确拒绝实现该 API。如果你的目标用户包含 iPhone/iPad 用户，任何依赖此 API 的“横屏锁定”逻辑都会失效。
常见错误现象：screen.orientation.lock('landscape') 在 iOS 上返回 Promise rejected，或根本无响应；screen.orientation.type 始终为 "portrait-primary"，即使设备已物理旋转。
- 仅 Android Chrome、Firefox Desktop、Edge（Chromium 内核）等较新浏览器支持完整 API
- iOS 上唯一可干预的只有 viewport meta —— 但那只是提示，无法强制锁定
- Web App 添加到主屏幕后，依然不改变此限制
Android 上 lock() 调用必须由用户手势触发
screen.orientation.lock() 是受权限约束的异步操作，必须在用户点击、触摸、键盘事件等“可信任事件”回调中调用，否则会立即 reject 并报错 SecurityError: The operation is insecure。
典型错误写法：onload、setTimeout、或组件挂载后自动调用 —— 这些都不算用户手势上下文。
- 正确做法：绑定到按钮的
onclick或ontouchstart，例如：<button onclick="lockLandscape()">进入横屏模式</button> <script> function lockLandscape() { screen.orientation.lock('landscape').catch(e => console.error(e)); } </script> - 注意：同一页面中多次 lock 可能被忽略，需先
unlock()再重新 lock - 部分 Android 版本（如旧版 MIUI）会弹出系统级权限提示，用户拒绝后后续调用均失败
替代方案：CSS + JS 模拟横屏体验（iOS 可用）
既然原生 API 在 iOS 上走不通，务实做法是放弃“系统级锁定”，转而用视觉和交互模拟横屏感：旋转容器、禁用滚动、适配触控区域。
核心思路是监听 window.orientation（已废弃但 iOS 仍可用）或 matchMedia('(orientation: landscape)')，再用 CSS transform: rotate(90deg) 配合 viewport 动态缩放。
- 关键 CSS：
.landscape-simulated { transform: rotate(90deg); transform-origin: left top; width: 100vh; height: 100vw; position: absolute; top: 0; left: 0; } - JS 中用
matchMedia('(orientation: landscape)')监听方向变化，而非依赖screen.orientation - 务必设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则旋转后缩放失控 - 注意：软键盘弹出会触发 orientation 变化，需额外处理输入框聚焦逻辑
判断是否真正支持 lock() 的安全检测方式
不要只靠 'orientation' in screen 判断，因为 iOS 也暴露 screen.orientation 对象（只是方法不可用）。真实可用性必须通过 try/catch + 实际调用验证。
推荐检测函数：
async function canLockOrientation() {
if (!screen.orientation || !screen.orientation.lock) return false;
try {
await screen.orientation.lock('portrait');
await screen.orientation.unlock();
return true;
} catch (e) {
return false;
}
}
这个函数会在 Android 上 resolve true，在 iOS 上 resolve false，且不污染当前 orientation 状态。
容易忽略的一点：某些安卓 WebView（如微信内置浏览器）虽然有 lock 方法，但实际调用会静默失败 —— 所以运行时检测比 UA 判断可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
