移动端横屏观影需分层实现：优先调用screen.orientation.lock()（HTTPS+手势触发），失败则CSS视觉旋转+明确引导，同时适配video全屏平台差异并提供用户提示。
在移动端网页中实现全屏横屏观影的自动旋转锁定，没有“完美”的一键方案，但可以通过分层策略逼近最佳体验：优先尝试原生锁屏，失败则视觉模拟 + 明确引导，同时兼顾 video 全屏行为差异。
一、先试 screen.orientation.lock()，但必须守规矩
这是唯一真正锁定方向的原生方式，但限制极严：
- 只能在 HTTPS（或 localhost）环境下运行
- 必须由用户真实手势触发（如点击“播放”或“全屏”按钮），不可在页面加载、autoplay 或定时器中调用
- 仅 Android Chrome 80+、Firefox for Android、Safari 16.4+ 部分支持 landscape-primary/landscape-secondary；iOS Safari 始终返回 NotSupportedError，screen.orientation 为 undefined
- 微信内置 WebView、QQ 浏览器等常静默忽略 lock 请求
二、video 全屏时主动适配横屏逻辑
很多视频网站依赖 video 进入全屏后的系统行为，但各平台不一致：
- Android Chrome：进入全屏后通常自动横屏，此时可立即调用 screen.orientation.lock('landscape-primary') 巩固状态
- iOS Safari：全屏后仍维持竖屏方向，screen.orientation.type 不更新，需靠 window.innerWidth > window.innerHeight 或 resize 事件 判断是否已横置
- 监听 video.webkitbeginfullscreen（iOS）和 fullscreenchange（Android），在回调中执行锁屏或 CSS 旋转
三、CSS 视觉旋转兜底，避免白屏或错位
当锁屏失败或不支持时，用 transform 模拟横屏，关键要精准控制范围：
- 只在竖屏设备上启用：@media screen and (orientation: portrait)
- 旋转整个 body：transform: rotate(90deg)，并设 transform-origin: top left
- 交换宽高：width: 100vh; height: 100vw;，否则内容被裁切
- 对 absolute/fixed 定位元素单独重算坐标，或改用 vw/vh 单位替代 px 偏移
四、用户提示与权限闭环不能少
技术兜底之外，体验靠清晰反馈补全：
- 检测到竖屏且视频未全屏时，显示半透明遮罩层，带旋转动画箭头 + 文字：“请将手机横过来观看”
- 对 iOS 用户单独提示：“iOS 系统限制，无法自动旋转，请手动横屏”
- 首次进入时若弹出“允许使用全屏和方向锁定”，务必引导用户点“允许”并勾选“不再询问”
- 监听 screen.orientation.onchange，若意外解锁（如用户上滑退出全屏），可自动恢复 CSS 旋转或再次提示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
