viewport meta标签未正确设置会导致横竖屏切换不触发媒体查询，必须包含width=device-width；orientation媒体查询在重排后延迟生效，需手动检查初始状态并注意css优先级与选择器精度。
viewport meta标签没设对，横竖屏切换根本不会触发媒体查询
很多页面写了 @media (orientation: landscape) 却没反应，第一反应不是代码错，而是 <meta name="viewport"> 根本没配。iOS Safari 和 Android Chrome 都依赖这个标签来识别视口方向变化。
必须确保 HTML 中有这行（且不能被 JS 动态覆盖）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width是关键——缺了它，横屏时浏览器可能仍按竖屏宽度渲染，orientation媒体查询就永远不匹配 -
user-scalable=no虽非必需，但能避免双击缩放干扰方向判断（尤其在某些安卓 WebView 中） - 不要用
width=375这类固定值，否则横屏时orientation: landscape可能匹配失败
@media (orientation: landscape) 的实际触发时机很“懒”
这个媒体查询不是一转屏就立刻重算，而是在浏览器完成重排（reflow）后才生效——通常有几十毫秒延迟，且依赖视口尺寸是否真正变化。常见现象是：旋转手机后样式没变，等半秒才跳。
- 横屏时如果设备物理宽度 orientation: landscape 仍可能不触发，因为逻辑宽度没超过高度（需结合
min-width或min-height判断） - 更稳妥的写法是组合使用：
@media (orientation: landscape) and (min-width: 480px) - 部分安卓 WebView 在锁屏状态下旋转，
orientation不会更新，得监听window.matchMedia的change事件做兜底
JavaScript 监听 orientationchange 早已不推荐
window.addEventListener('orientationchange', ...) 在 iOS 12+ 和所有现代安卓浏览器中已被废弃。它只反映设备陀螺仪角度，和实际 CSS 渲染方向脱节——比如平板横放但应用强制竖屏，事件照发，但媒体查询根本不匹配。
- 正确做法是用
window.matchMedia主动查询：const mql = window.matchMedia('(orientation: landscape)') - 监听变更：
mql.addEventListener('change', e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载也要手动检查：
if (mql.matches) { /* 初始化横屏状态 */ }
横竖屏样式冲突常因 CSS 优先级或重绘顺序出问题
比如竖屏下设了 body { padding: 20px; }，横屏想改成 padding: 10px，结果横屏时 padding 还是 20px——不是媒体查询失效，而是其他规则（如内联样式、!important、更具体的 selector）把它盖住了。
- 用浏览器开发者工具的 “Styles” 面板点开
@media规则，确认它是否被划掉（strikethrough） - 避免在媒体查询里用太宽泛的选择器（如
div p），容易被全局样式覆盖；改用带 class 的精准选择器（如.page-content p） - 横屏布局若涉及 flex/grid 重排，注意
flex-direction或grid-template-columns是否需要显式重置，否则可能继承竖屏值
横竖屏适配真正的复杂点不在语法，而在「浏览器怎么定义当前方向」和「CSS 何时重计算」这两个底层行为上。很多人卡住，是因为把媒体查询当成即时开关，其实它是个基于视口快照的声明式响应机制——快照没更新，再准的条件也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
