不能靠强制旋转实现可靠横屏适配，screen.orientation.lock('landscape')在iOS Safari中不可用，Android支持有限；真正可行的是「媒体查询+布局重构+用户引导」三层配合，其中@media (orientation: landscape)是最稳定基础手段，需注意其仅反映宽高比、不绑定设备物理朝向，且必须配合viewport正确设置与dvh/dvw单位才能准确响应。
不能靠强制旋转实现可靠横屏适配，screen.orientation.lock('landscape') 在 iOS Safari 中根本不可用，Android 也仅部分版本支持；真正可行的方案是「媒体查询 + 布局重构 + 用户引导」三层配合。
用 @media (orientation: landscape) 切换布局结构
这是最稳定、兼容性最好的基础手段，但必须注意它只反映物理方向，不绑定宽度。常见错误是把它和 @media (max-width: 768px) 混用，导致 iPad 横屏（宽 1024px）被误判为“小屏”而套错样式。
- 竖屏默认写法应为移动优先：
.form-group { display: flex; flex-direction: column; } - 横屏覆盖时明确重置主轴：
@media (orientation: landscape) { .form-group { flex-direction: row; gap: 16px; } } - 所有子项的
margin必须清空，改用gap—— 否则margin-right在横排下有效，在竖排下会把元素顶出容器 - 如果横屏后文字上下挤在一起，大概率是
align-items: stretch拉高了所有子项，加align-items: flex-start即可修复
screen.orientation API 调用失败的典型场景
这个 API 看似能“锁横屏”，实则限制极多，90% 的失败不是代码写错，而是环境不满足。
-
screen.orientation在 iOS Safari 中始终为undefined，连判断都做不到 - 未在用户手势（如
click、touchend）回调中调用，Chrome 直接抛"NotAllowedError" - 页面未进入全屏状态就调用
lock()，某些 Android WebView 会静默失败 - 目标浏览器根本不支持，比如 Firefox for Android、旧版 UC 浏览器
CSS 旋转模拟横屏的实操要点
当原生 API 不可用时，用 transform: rotate(90deg) 是主流降级方案，但必须同步交换宽高，否则内容被裁切。
- 只在竖屏环境下启用：
@media (orientation: portrait) { body { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; } } -
transform-origin: top left是关键，避免旋转后整个视口偏移出屏幕 - 所有绝对定位元素（如弹窗、浮层）需手动重算
top/left，否则位置完全错乱 - 监听
resize事件时务必节流，建议用requestAnimationFrame包裹重绘逻辑，否则频繁触发会导致 UI 闪烁
video 全屏时横屏行为不统一怎么处理？
H5 进入全屏后，系统自动旋转逻辑差异极大，不能依赖单一判断。
- Android Chrome：全屏后自动横屏，
screen.orientation.type变为"landscape-primary" - iOS Safari：全屏后仍保持竖屏，
screen.orientation不更新，只能靠innerWidth > innerHeight实时比对 - 监听
webkitbeginfullscreen（iOS）或fullscreenchange（Android），进入后立即尝试lock('landscape')，失败则 fallback 到 CSS 旋转 - 别忘了在退出全屏时清理 class 或 transform，否则返回页面后布局残留
最易被忽略的是：orientation 媒体查询不会触发重排，但字体、颜色、间距这些视觉属性必须同步调整 —— 竖屏下 color: #999 在阳光直射时可能根本看不清 active 步骤，这不是布局问题，却是用户第一眼卡住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
