应避免直接使用@media (orientation: landscape)判断横竖屏，因其在iOS Safari等环境中不响应方向变化；推荐用width/height组合或aspect-ratio（现代浏览器支持）配合viewport正确设置来实现稳定响应。
用 @media 监听 orientation 时要注意什么
直接写 @media (orientation: landscape) 看似合理，但实际在 iOS Safari 和部分安卓 WebView 中不可靠——它只反映初始加载时的方向，方向切换后不触发重排。真正稳定的方式是用 height 和 width 比较判断：@media (min-width: 768px) and (max-height: 400px) 这类组合更可靠，尤其对折叠屏或横置手机。
常见错误是只写 orientation 就以为完事了，结果用户转屏后布局卡死。建议优先用 width/height + aspect-ratio（现代浏览器支持）双保险。
aspect-ratio 是比 orientation 更准的横竖判断依据
aspect-ratio 能直接表达“宽高比是否大于 1”，语义清晰且响应及时。比如：
@media (aspect-ratio: 16/9) { /* 横屏倾向 */ }但注意兼容性：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才可用。旧环境必须回退到 min-width/max-width + min-height/max-height 组合。
立即学习“前端免费学习笔记（深入）”；
- 横屏常用条件：
@media (min-width: 600px) and (max-height: 400px) - 竖屏常用条件：
@media (max-width: 480px) or (min-height: 600px) - 避免用
device-width，它在高 DPR 设备上返回的是 CSS 像素，不是物理尺寸
横竖屏切换时 DOM 结构不变，但需重设 transform 或 writing-mode
有些场景（如仪表盘、扫码页）需要强制视觉横屏，即使设备是竖着拿的。这时不能只靠 media query 改样式，还得配合 JS 监听 window.orientation（已废弃）或 screen.orientation API，再动态加 class 控制旋转：
.force-landscape { transform: rotate(90deg); transform-origin: left top; width: 100vh; height: 100vw; }但要注意：纯 CSS 旋转会导致触摸坐标错乱，pointer-events: none 会禁用交互，所以更稳妥的做法是用 writing-mode: vertical-lr 配合 flex 反向排列，保持事件区域正常。
移动端 viewport 设置不当会让 media query 失效
如果 <meta name="viewport" content="width=device-width"> 缺失或写成 width=375 这类固定值，min-width 查询就完全失效。必须确保 viewport 是响应式的：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
另外，iOS Safari 在横屏时可能把地址栏高度算进 vh，导致基于 vh 的布局跳变。解决办法是用 100dvh（Safari 16.4+）或 JS 动态设置 style="--vh: 100vh" 并监听 resize 更新。
最常被忽略的是：横竖屏切换时，某些安卓浏览器会重绘整个页面，但不会触发 resize 事件，只能靠 orientationchange（已废弃）或 screen.orientation.onchange 补位。
