@media (orientation: landscape) 单独使用基本无效，必须配合正确 viewport 标签（含 width=device-width）、叠加 min-width 或 min-aspect-ratio 等断点，并用 window.matchMedia() 主动监听且首次手动检查，才能可靠响应横屏。
@media (orientation: landscape) 单独用基本无效，必须配对 <meta name="viewport">、叠加断点、并用 window.matchMedia() 主动监听才可靠。
viewport 标签写错，orientation 媒体查询就压根不触发
几乎所有“写了样式却没反应”的问题，根源都在 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: landscape) 不是实时响应，且判断逻辑很表面
它只看 window.innerWidth > window.innerHeight 这个宽高比快照，不读陀螺仪、不关心物理朝向，也不监听变化。结果就是：地址栏没收起、折叠屏半展开、桌面模拟器拉宽窗口，都可能让它漏判或误判。
- 触发时机滞后：在浏览器完成 reflow 后才重新计算，通常有几十毫秒延迟
- iOS 15+ 快速旋转可能跳过触发；Android Chrome v79+ 仅读取初始方向，后续旋转不再更新
- 真机测试必须做——桌面模拟器的 “Rotate” 按钮不等价于真实旋转
- 稳妥写法是叠加条件：
@media (orientation: landscape) and (min-width: 480px)或更准的@media (min-aspect-ratio: 1280/720)
flex-direction、100vh、margin 等 CSS 属性在横竖屏切换时最容易翻车
这些值不会自动兜底，必须显式干预。比如 100vh 在 iPhone 14 横屏下只剩 390px，常导致内容被截；margin-right 在 flex-direction: column 下变成“往右挤”，破坏对齐。
立即学习“前端免费学习笔记（深入）”；
- 高度相关：改用
100dvh（注意 Android Chrome 100 以下不支持），或降级为min-height: 100%+html, body { height: 100% } - 宽度相关：优先用
100%或100dvw，避免100vw在 iOS Safari 横屏时包含已隐藏地址栏高度造成溢出 - 布局方向：竖屏用
flex-direction: column，横屏必须显式写row，不能指望自动翻转 - 间距控制：统一用
gap替代margin，它会随主轴方向自动适配；删掉子项上所有固定方向的margin
别用 orientationchange，改用 window.matchMedia() 主动查
window.addEventListener('orientationchange', ...) 在 iOS 12+ 和现代安卓浏览器中已被废弃。它只反映设备陀螺仪角度，和实际 CSS 渲染方向脱节——比如平板横放但应用强制竖屏，事件照发，但媒体查询根本不匹配。
- 正确做法：
const mql = window.matchMedia('(orientation: landscape)') - 监听变更：
mql.addEventListener('change', e => { if (e.matches) { /* 横屏逻辑 */ } }) - 首次加载必须手动检查：
if (mql.matches) { /* 初始化横屏状态 */ } - 降级方案：当
'orientation' in screen不可用时，监听resize并粗略判断宽高比
真正麻烦的不是写几个媒体查询，而是 viewport 设置、CSS 单位选择、JS 监听方式这三者必须同步对齐——漏掉任何一环，横竖屏切换就会在某个机型或某个操作路径上静默失效。
