@media (orientation: landscape) 和 @media (orientation: portrait) 能用但不可单独依赖，必须配合正确 viewport 标签（含 width=device-width）、尺寸或宽高比断点、dvh/dvw 单位及 matchmedia 动态监听，否则真机上易延迟、漏判或失效。
@media (orientation: landscape) 和 @media (orientation: portrait) 能用，但单独写基本没用——缺 viewport 或写错，它就完全不触发；不加兜底条件，它在真机上大概率延迟、漏判甚至反向匹配。
viewport 标签写错，@media (orientation: landscape) 就压根不计算
iOS Safari 和 Android Chrome 都靠这个标签识别方向变化。漏掉 width=device-width，横屏时浏览器仍按竖屏宽度渲染，orientation 媒体查询永远不匹配。
- 常见错误：写成
width=375或width=414—— 视口宽度被锁死，旋转后innerWidth不变，媒体查询无从重算 - 更隐蔽的问题：JS 动态改写了
<meta name="viewport">，初始设置被覆盖，后续旋转失效 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
只写 @media (orientation: landscape) 为什么经常不生效
它只看 window.innerWidth > window.innerHeight 这个宽高比结果，不读传感器，也不管地址栏是否收起、折叠屏是否半开。
- iOS Safari 横屏时若地址栏未隐藏，
innerHeight变大，orientation: landscape可能根本不匹配 - iOS 15+ 快速旋转容易跳过触发；Android Chrome v79+ 有时只读初始方向，后续旋转不更新
- 桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须上真机
- 稳妥写法是叠加断点：
@media (orientation: landscape) and (min-width: 480px)或更准的@media (orientation: landscape) and (min-aspect-ratio: 1280/720)
JavaScript 监听别用 orientationchange，改用 matchMedia
window.orientation 已废弃，Chrome 99+ 彻底移除，Safari/Firefox 早就不响应变化；orientationchange 事件在现代浏览器中基本不触发，且和 CSS 渲染脱节。
- 正确做法：
const mql = window.matchMedia("(orientation: landscape)") - 监听变更：
mql.addEventListener("change", e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载必须手动检查：
if (mql.matches) { /* 初始化横屏状态 */ } - IE11 兼容可选：
mql.addListener()，但实际影响极小（IE11 本身无自动旋转逻辑）
横屏时 100vh、100vw、flex-direction 容易翻车
CSS 不会自动兜底，这些值在方向切换后基准突变，必须显式干预。
-
100vh在 iPhone 14 横屏下只剩约 390px，内容常被截；改用100dvh（注意 Android Chrome 100 以下不支持），或降级为min-height: 100%+html, body { height: 100% } -
100vw在 iOS Safari 横屏时包含已隐藏地址栏高度，造成横向溢出；优先用100%或100dvw -
flex-direction不会自动翻转；竖屏用column，横屏必须显式写row，否则子项仍堆叠 -
font-size: 4vw横屏暴增；改用clamp(14px, 2.5vw, 16px)锁死区间
真正可靠的横竖屏判断不是靠单一机制，而是 viewport 设置 + 媒体查询组合 + matchMedia 监听 + 关键 CSS 属性兜底四者闭环。最容易被忽略的是：viewport 标签是否被 JS 覆盖、100dvh 的兼容性 fallback、以及首次加载时 mql.matches 的手动检查——这三处一漏，横屏样式就大概率在真机上“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
