viewport标签缺失width=device-width会导致@media (orientation: landscape)等横竖屏媒体查询失效，因浏览器无法正确识别方向变化；需用matchmedia替代废弃的orientationchange事件，并结合尺寸断点与100dvh等方案应对真机渲染差异。
viewport 标签写错，@media (orientation: landscape) 就不会触发
几乎所有横竖屏媒体查询失效的根源，都在 <meta name="viewport">。iOS Safari 和 Android Chrome 都依赖它识别方向变化，漏掉 width=device-width，横屏时浏览器仍按竖屏逻辑渲染，@media (orientation: landscape) 永远不匹配。
常见错误包括：
- 漏写
width=device-width—— 最常见，直接导致媒体查询“静默失效” - 用固定值如
width=375或width=768—— 视口宽度不变，浏览器无依据重算方向 - 被 JS 动态覆盖 —— 初始设置后又被脚本改写，后续旋转不再生效
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
别只靠 orientation，它在真机上延迟、漏判、甚至不更新
@media (orientation: landscape) 不是实时响应旋转动作，而是在浏览器完成重排（reflow）后才重新计算，通常有几十毫秒延迟。更关键的是：它只看“逻辑宽度是否大于高度”，不关心物理朝向或 UI 栏是否展开。
典型失效场景：
- iOS 15+ 快速旋转可能跳过触发
- Android Chrome v79+ 仅读取初始方向，后续旋转不再更新
- 横屏时地址栏未收起、折叠屏半展开，
window.innerWidth ，<code>orientation: landscape根本不匹配 - 桌面模拟器的 “Rotate” 按钮 ≠ 真机旋转，测试必须用真机
稳妥做法是组合判断：@media (orientation: landscape) and (min-aspect-ratio: 1280/720)，或更直接的尺寸断点：@media (max-height: 480px) and (min-width: 640px) —— 后者响应真实瓶颈（高度骤减），兼容性更好。
100vh、flex-direction、font-size: 4vw 这些在横屏下最容易翻车
方向切换后 CSS 基准突变，但不会自动兜底，必须显式干预：
-
100vh在 iPhone 14 横屏下只剩 390px，常导致内容被截；改用100dvh（动态视口高度），或降级为min-height: 100%+html, body { height: 100% } -
flex-direction不会自动翻转；竖屏用column，横屏必须显式写row，否则子项仍堆叠 -
font-size: 4vw横屏暴增；改用clamp(14px, 2.5vw, 16px)锁死区间 -
100vw在 iOS Safari 横屏时包含已隐藏地址栏高度，造成溢出；优先用100%或100dvw（注意 Android Chrome 100 以下不支持）
JavaScript 监听别用 orientationchange，改用 matchMedia
window.addEventListener('orientationchange', ...) 在 iOS 12+ 和所有现代安卓浏览器中已被废弃。它只反映设备陀螺仪角度，和实际 CSS 渲染方向脱节——比如平板横放但应用强制竖屏，事件照发，但媒体查询根本不匹配。
正确做法是用 window.matchMedia 主动查询：
const mql = window.matchMedia('(orientation: landscape)');
mql.addEventListener('change', e => {
if (e.matches) { /* 横屏逻辑 */ }
});
// 首次加载也要手动检查
if (mql.matches) { /* 初始化横屏状态 */ }
注意：监听器必须在页面加载后立即注册，且不能依赖 window.orientation —— 它在部分 Android WebView 和 iOS 16+ 中已不可靠。
真机测试前最容易被忽略的，是地址栏收起/弹出对 window.innerHeight 的干扰，以及 safe-area-inset-top 在 fixed 元素定位中的影响。这些不是“偶尔出问题”，而是每次横屏切换都可能触发的确定性行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
