viewport标签写错会导致@media (orientation: landscape)不触发，根源在于缺失width=device-width等关键参数；其判定仅依赖宽高比快照，需叠加尺寸或宽高比条件提升准确性，并用matchMedia替代废弃的orientationchange事件。
viewport 标签写错，@media (orientation: landscape) 就不会触发
几乎所有“写了规则但没反应”的问题，根源都在 。iOS Safari 和 Android Chrome 都依赖它来识别方向变化。漏掉 width=device-width，横屏时浏览器仍按竖屏宽度渲染，orientation 媒体查询压根不进入重算流程。
常见错误包括：
- 漏写
width=device-width—— 必须有，缺了就失效 - 写成固定值如
width=375—— 视口被锁死，旋转后window.innerWidth不变，媒体查询无从响应 - 被 JS 动态覆盖 —— 初始设置后又被脚本改写，后续旋转失效
推荐写法：
@media (orientation: landscape) 的判定逻辑很“表面”
它只看 window.innerWidth > window.innerHeight 这个结果，不读陀螺仪、不看物理朝向。这意味着：
- 地址栏没隐藏（尤其 iOS Safari），
innerHeight变大，orientation: landscape可能根本不匹配 - 用户 zoom 很大，竖着拿手机但
innerWidth > innerHeight，照样触发横屏样式 - 折叠屏半展开、分屏模式下，宽高比“凑巧”满足或不满足，容易误判
- 它不是实时响应，而是在 reflow 后才重新计算，通常有几十毫秒延迟
所以别指望它“精准反映设备方向”，它只是个视口宽高比快照。单独使用不可靠，必须叠加条件提升准确性。
组合断点比单用 orientation 更稳妥
只靠 @media (orientation: landscape) 容易漏掉首次状态或快速旋转场景。更可靠的做法是叠加尺寸或宽高比限制：
-
@media (orientation: landscape) and (min-width: 480px)—— 排除小屏横置但宽度仍不足的误判 -
@media (orientation: landscape) and (min-aspect-ratio: 1280/720)—— 直接约束宽高比，比单纯看 orientation 更稳定 -
@media (max-height: 480px) and (min-width: 640px)—— 横屏时高度骤减是更真实的瓶颈信号
注意：必须加上 screen 类型限定，比如 @media screen and (orientation: landscape)，否则打印预览等场景会意外触发。
JavaScript 监听别用 orientationchange，改用 matchMedia
window.addEventListener('orientationchange', ...) 在 iOS 12+ 和现代安卓浏览器中已被废弃。它只反映设备陀螺仪角度，和实际 CSS 渲染方向脱节——比如平板横放但应用强制竖屏，事件照发，但媒体查询根本不匹配。
正确做法是：
- 用
window.matchMedia('(orientation: landscape)')主动查询 - 监听
change事件：mql.addEventListener('change', e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载也要手动检查：
if (mql.matches) { /* 初始化横屏状态 */ }
特别注意：横屏时 100vh、100vw 容易翻车，优先用 100dvh/100dvw（Android Chrome 100 以下不支持），或降级为 min-height: 100% + html, body { height: 100% }。
真机测试不可替代。桌面模拟器的 “Rotate” 按钮不等价于真实旋转，尤其是地址栏收起行为、折叠屏展开节奏、WebView 行为差异，都只有在真机上才能暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
