screen.orientation.lock('landscape')是唯一原生强制横屏方式，但需用户手势触发且仅android部分浏览器和safari 16.4+支持；ios safari中该api不可用，主流降级方案为css旋转+尺寸交换，并需处理video全屏兼容性及resize节流。
screen.orientation.lock('landscape') 是目前唯一能真正“强制”横屏的原生方式，但它有严格前提：必须在用户手势触发的上下文中调用（比如点击按钮），且仅在部分 Android 浏览器和 Safari 16.4+ 中稳定生效；iOS Safari 和大多数桌面浏览器根本不允许锁方向。
screen.orientation.lock() 调用失败的常见原因
这个 API 看似简单，但实际踩坑率极高：
-
screen.orientation在 iOS Safari 中始终为undefined，哪怕在全屏后调用也无效 - 未在用户交互（如
click、touchend）回调里调用，Chrome 会直接抛出"NotAllowedError" - 页面未处于全屏状态时调用
lock()，某些 Android WebView 会静默失败 - 目标设备不支持
orientation.lock（如 Firefox for Android、旧版 UC 浏览器）
CSS + JS 模拟横屏是更通用的方案
当 screen.orientation.lock() 不可用时，主流做法是用 CSS transform: rotate(90deg) 把整个 body 顺时针转 90°，再配合尺寸交换实现视觉横屏。关键点在于：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只在
@media screen and (orientation: portrait)下启用旋转，避免横屏设备误转 - 必须同时设置
body.style.width = '100vh'和body.style.height = '100vw'，否则内容被裁切 -
transform-origin建议设为'top left'，避免旋转后定位偏移 - 所有绝对定位元素需手动重算坐标，否则位置错乱
video 全屏时自动横屏的兼容处理
H5 <video></video> 全屏播放时，系统常自动切横屏，但行为不统一：
- Android Chrome：全屏后自动横屏，且
screen.orientation.type变为"landscape-primary" - iOS Safari：全屏后仍保持竖屏方向，
screen.orientation不更新，只能靠resize+innerWidth/innerHeight判断 - 监听
video.webkitbeginfullscreen（iOS）或fullscreenchange（Android）事件，在进入全屏后立即尝试lock('landscape')，失败则 fallback 到 CSS 旋转
真正可靠的横屏方案从来不是“一刀切”，而是分层降级：先试 screen.orientation.lock()，失败则用 CSS 旋转兜底，再辅以清晰的用户提示。最易被忽略的是 resize 事件节流——频繁触发旋转逻辑会导致 UI 闪烁，建议用 requestAnimationFrame 包裹重绘逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
