orientation媒体查询在移动端不完全可靠，iOS Safari最稳定但需避免方向锁定，Android Chrome v79+仅读取初始方向；应结合aspect-ratio与JS协同，用matchMedia防抖监听，并注意dvh单位和微信渲染刷新。
orientation媒体查询在移动端是否可靠
不完全可靠，尤其在桌面浏览器或部分安卓 WebView 中会失效。iOS Safari 支持最稳定，但前提是页面没有强制锁定方向（比如通过 screen.orientation.lock()），且设备本身支持硬件方向传感器。
常见错误现象：orientation: landscape 在 iPad 横屏时没触发、Chrome 桌面模拟器始终返回 portrait、某些折叠屏手机在半开状态判断失准。
- 只在真实移动设备上测试，别信 DevTools 的“Rotate”按钮
- 避免单独依赖
orientation做关键布局切换，建议和aspect-ratio或max-width/max-height组合使用 - Android Chrome 从 v79 起对
orientation的支持降级为只读取初始方向，后续旋转不再触发媒体查询重算
怎么写一个真正生效的横竖屏 CSS 切换
靠单一 @media (orientation: landscape) 很容易漏掉边界情况。更稳妥的做法是用宽高比 + 方向双重判断，同时给 body 打上 class 方便 JS 协同。
使用场景：视频全屏按钮位置调整、键盘弹出时隐藏侧边栏、游戏画布拉伸控制。
@media (orientation: landscape) and (min-aspect-ratio: 12/9) {
.video-controls { bottom: 24px; }
}
@media (orientation: portrait) and (max-aspect-ratio: 9/12) {
.video-controls { bottom: 8px; }
}
-
min-aspect-ratio: 12/9比单纯orientation更抗干扰，能过滤掉宽屏手机误判 - 不要用
16/9这类固定值，不同设备像素比差异大，12/9（即 4/3）兼容性更广 - 加
!important解决旧版 iOS Safari 层叠优先级 bug（仅限必要时）
JS 监听 orientationchange 还要不要用
要，但不能只靠它。原生 orientationchange 事件在 iOS 上已废弃（Safari 15.4+ 控制台警告），且安卓多数浏览器根本不触发。
性能影响：频繁监听 resize 有开销，但比等 orientationchange 失效强。
- 改用
window.matchMedia主动轮询：matchMedia('(orientation: landscape)') - 结合
resize事件做防抖（300ms 内只执行一次），避免滚动/缩放误触发 - 首次加载必须手动调用一次匹配逻辑，否则冷启动时 class 不同步
横竖屏切换后字体/间距错乱怎么办
根本原因是 rem/em 依赖根字号，而屏幕旋转时 viewport 缩放行为不一致，尤其在微信内置浏览器里常出现根元素 font-size 没重算。
容易踩的坑：用 vh/vw 做高度适配时，横屏下 100vh 可能等于整个物理屏幕高（含地址栏），导致内容被截断。
- 横屏时强制重设
html字号：document.documentElement.style.fontSize = '16px' - 避免纯用
vh布局，改用min-height: 100dvh（dvh是动态视口单位，兼容性需查 CanIUse） - 微信中横屏后立即调用
setTimeout(() => window.scrollTo(0, 0), 100)可强制刷新渲染层
事情说清了就结束。真正难的是设备碎片化——同一行 @media 规则，在 iPhone 15、小米 14、iPadOS 17 和微信安卓版里可能有四种表现。多真机验证，少信文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
