screen orientation api 不能真正强制横屏，仅能发起请求：ios safari 完全不支持，android 浏览器要求 https、用户手势触发且常需先全屏，失败时静默或抛错；可靠方案是 css 媒体查询 + 旋转提示 + 视觉模拟。
Screen Orientation API 能否真正强制横屏
不能完全强制。现代浏览器（尤其是 iOS Safari）出于用户体验和系统策略限制，screen.orientation.lock() 在非全屏或非用户手势触发的上下文中会被静默忽略，且 iOS 完全不支持该 API。所谓“强制”，实际只是向浏览器发出请求，是否执行取决于平台、上下文和用户权限。
调用 screen.orientation.lock('landscape') 的前提条件
该方法必须在用户主动交互（如点击、触摸）回调中同步调用，且页面需处于可锁定状态（例如已进入全屏、或满足特定导航上下文）。否则会抛出 NotAllowedError 或直接失败。
- 必须在用户手势事件（如
click、touchstart）的处理函数内立即调用，不能延迟（setTimeout或 Promise.then 中调用无效） - 部分 Android 浏览器要求页面已通过
requestFullscreen()进入全屏模式后才允许方向锁定 - Chrome for Android 从 95+ 版本起，仅允许在安装为 PWA 且启用
display: standalone的 manifest 中使用锁屏功能 - 调用前建议先检查支持性：
typeof screen.orientation !== 'undefined' && 'lock' in screen.orientation
常见错误：为什么 screen.orientation.lock('landscape') 总是报错
最常遇到的是 DOMException: Failed to execute 'lock' on 'ScreenOrientation': The page is not fullscreen and the orientation cannot be locked. —— 这不是代码写错了，而是浏览器策略拦截了非全屏上下文的方向锁定请求。
- iOS Safari 完全不实现
screen.orientation，访问该属性返回undefined，调用lock()会直接报TypeError - 即使在 Android Chrome 中，若页面未声明
manifest.json或未被添加到主屏幕，lock()可能静默失败（无错误但不生效） - 尝试在
DOMContentLoaded或load事件中调用，因缺乏用户激活态（user activation），必然被拒绝 -
'landscape'不是标准值；应使用'landscape-primary'或'landscape-secondary'，否则部分浏览器（如旧版 Firefox）会拒绝
更可靠的实际方案：CSS + 提示 + 回退逻辑
与其依赖不可靠的 API，不如用 CSS 媒体查询检测方向，并在竖屏时展示遮罩层引导用户旋转，同时监听 orientationchange 或 resize 事件做响应式反馈。
/* 强制视觉横屏（仅布局层面） */
@media (orientation: portrait) {
body {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow: hidden;
}
.rotate-tip {
display: block;
}
}
.rotate-tip {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 9999;
}
注意：transform: rotate() 会影响事件坐标和滚动行为，生产环境需额外处理 touch/click 坐标映射；真正的横屏体验仍需用户手动旋转设备——API 不解决物理约束。
别指望靠一行 lock() 就让 iPhone 横过来。能做的，是判断它没横、告诉用户该横、并在它横了之后正确渲染。其余的，交给系统。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
