viewport标签写错会导致@media (orientation: landscape)几乎不触发；必须写width=device-width，禁用固定宽度，避免JS覆盖；portrait和landscape需配对使用并显式重写flex、vh/vw等样式。
viewport 标签写错，@media (orientation: landscape) 就压根不触发
几乎所有“写了样式却没反应”的问题，根源都在 HTML 的 <meta name="viewport">。iOS Safari 和 Android Chrome 都依赖它识别方向变化，缺了或写错，浏览器连重算媒体查询的动机都没有。
- 必须包含
width=device-width——缺它，横屏时仍按竖屏逻辑渲染，@media (orientation: landscape)永远不匹配 - 禁用固定值，如
width=375或width=414——视口宽度锁死，媒体查询无从重算 - 避免被 JS 动态覆盖——初始设置后又被脚本改写，后续旋转失效
- 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@media (orientation: portrait) 和 @media (orientation: landscape) 必须配对使用
单独写一个，另一个没定义，容易导致布局断裂或回退到默认样式。它们不是互斥开关，而是两个独立生效的规则块。
- 竖屏样式写在
@media (orientation: portrait)里：比如flex-direction: column、侧边栏隐藏、100dvh高度兜底 - 横屏样式写在
@media (orientation: landscape)里：比如flex-direction: row、侧边栏上置、100dvw宽度控制 - 两者都得确保父容器有
display: flex或display: grid，否则方向切换后 flex 属性不生效 - 别混用
min-width断点——同一设备旋转时宽度基本不变，orientation会触发，min-width不会
SCSS 里不能把 orientation 当断点塞进 @mixin respond-to()
orientation 是媒体特性（media feature），不是断点值（breakpoint）。把它硬塞进通用响应式 mixin，会导致编译错误或逻辑错乱。
- 正确做法是直接在 SCSS 文件顶层写两个独立块：
@media (orientation: portrait) { ... }和@media (orientation: landscape) { ... } - 如果要复用样式逻辑，用
@include引入内部定义的@mixin，而不是把@media包进 mixin - 例如：
@mixin landscape-layout { padding: 0 2rem; .sidebar { flex: 0 0 240px; } }，然后在@media (orientation: landscape)块里调用@include landscape-layout - 所有涉及
100vh、margin、flex-direction的翻车点，必须在这两个媒体查询块里显式重写，不能指望继承
真机测试前，先加 window.matchMedia 主动监听并初始化
@media (orientation: landscape) 不是实时响应，且判定逻辑很表面：只看 window.innerWidth > window.innerHeight 这个快照，不读陀螺仪、不关心物理朝向。iOS 15+ 快速旋转可能跳过触发，Android Chrome v79+ 后续旋转不再更新。
立即学习“前端免费学习笔记（深入）”；
- JS 初始化必须手动执行一次：
handleOrientation();，否则首次加载状态可能没应用 - 监听要用
mql.addEventListener("change", handler)，不是resize（移动端 resize 不一定随旋转触发） - 推荐搭配条件增强可靠性：
@media (orientation: landscape) and (min-width: 480px)或更准的@media (min-aspect-ratio: 1280/720) - 桌面模拟器的 “Rotate” 按钮不等价于真实旋转——地址栏收起/展开、折叠屏半展开等真实干扰，在模拟器里全被忽略
100vh 和 100vw 在方向切换后的实际像素值突变，以及 flex-direction 缺失显式声明时的默认行为差异。这些不会报错，但会在真机旋转瞬间让布局“跳一下”或内容被截断。 
