screen.orientation.lock()不能真正强制横屏，仅在HTTPS、用户手势同步调用、部分Android全屏前提下有限生效；iOS Safari中该API根本不存在，需用CSS旋转+尺寸交换视觉模拟横屏。
screen.orientation.lock() 不能真正强制横屏，绝大多数场景下会静默失败或直接报错——这不是你代码写错了，而是浏览器策略限制了它。
screen.orientation.lock() 调用必踩的三个前提
这个方法不是“设个参数就生效”的配置项，它像一个需要审批的权限请求，缺一不可：
- 页面必须运行在
HTTPS下（http://localhost是唯一例外；http://127.0.0.1都不行） - 必须在用户手势事件（如
click、touchstart）的回调中**同步调用**，不能放在setTimeout、Promise.then或DOMContentLoaded里 - 部分 Android 浏览器（Chrome 95+）要求先调用
document.body.requestFullscreen()进入全屏，否则直接拒绝
iOS Safari 中调用 screen.orientation.lock() 的真实表现
它根本不存在：screen.orientation 在 iOS Safari 中是 undefined，连属性都访问不到。任何尝试都会触发 TypeError: Cannot read property 'lock' of undefined，try/catch 都捕获不到——因为不是运行时报错，而是语法级缺失。
常见错误现象包括：
立即学习“前端免费学习笔记（深入）”；
- 本地 Chrome 测试正常，上线后 iPhone 用户完全无反应
- 控制台不报错，但
screen.orientation.type始终返回"portrait-primary"，哪怕设备已物理横放 - 试图在 PWA 启动时自动锁屏，结果白屏或卡在加载态
为什么传 'landscape' 还是失败？方向参数的坑
'landscape' 不是万能值，它只表示“接受任意横屏”，但部分浏览器（如旧版 Firefox、某些 Android WebView）根本不认这个字符串，会立刻 reject 并抛出 InvalidStateError 或 TypeError: Invalid orientation。
更稳妥的选择是：
- 用
'landscape-primary'（系统默认横屏，通常为左横）—— Chrome 58+、Edge 79+ 支持稳定 - 避免使用
'horizontal'、'vertical'等非标准字符串，它们在所有浏览器中均无效 - 锁定前可先读取
screen.orientation.type，避免重复调用（多次lock()可能被忽略）
CSS + JS 视觉模拟才是跨平台可靠方案
放弃“锁住系统方向”的执念，转而让竖屏设备看起来像横屏，这是目前唯一能在 iOS、Android、桌面端统一生效的做法：
- 只在
@media (orientation: portrait)下启用旋转：body { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; } - 所有
position: absolute元素坐标需手动重算，否则偏移严重 - 监听
resize事件判断宽高比变化（innerWidth > innerHeight），比依赖screen.orientation.type更兼容 iOS - 务必对
resize做节流（推荐requestAnimationFrame包裹），否则频繁触发导致 UI 闪烁
最易被忽略的是：你以为锁住了方向，其实只是没处理好旋转后的尺寸交换和坐标映射——视觉模拟不是“降级”，而是当前 Web 环境下的事实标准方案。
