orientation媒体查询常不生效，因仅检测设备物理方向而非窗口实际宽高比，且ios safari等浏览器在地址栏/软键盘变化时可能不同步screen.orientation.type与css查询；应优先用尺寸媒体查询、viewport设置及resize事件配合宽高比判断。
orientation媒体查询为什么经常不生效
因为 orientation 只检测设备的物理方向（portrait 或 landscape），不反映浏览器窗口实际宽高比。iOS Safari 和部分安卓 WebView 在地址栏展开/收起、软键盘弹出时会触发 orientation 变化，但页面未必重绘；更常见的是：横屏后宽度没变，@media (orientation: landscape) 却没命中——本质是设备报告的 screen.orientation.type 与 CSS 媒体查询不同步。
实操建议：
- 优先用
@media (min-width: 768px)或@media (max-height: 400px)等尺寸条件替代纯orientation，更可靠 - 在 iOS 上必须加
viewportmeta 的width=device-width，否则orientation查询可能始终返回portrait - 不要依赖
window.matchMedia监听orientation变化，改用resize事件 + 检查window.innerWidth > window.innerHeight
如何用 JavaScript 补充 orientation 判断的漏洞
CSS 的 orientation 媒体查询在软键盘弹出、分屏模式、折叠屏设备上极易失效。此时需用 JS 主动判断当前“视觉横屏”状态。
实操建议：
- 监听
resize事件，用Math.abs(window.orientation)辅助判断（注意：该属性已废弃，仅作参考） - 更稳妥的方式是对比
window.innerWidth和window.innerHeight，并加 50px 容差避免抖动：const isLandscape = window.innerWidth > window.innerHeight + 50;
- 配合
document.documentElement.classList.toggle('is-landscape', isLandscape)，再写 CSS：.is-landscape .header { flex-direction: row; }
横屏时字体和 touch-target 大小怎么不被放大
移动端横屏常伴随系统缩放行为（尤其 Android Chrome），导致文字突然变大、按钮点击区域失真。这不是 orientation 的问题，而是 viewport 缩放策略失控。
实操建议：
- 在
<meta name="viewport">中禁用用户缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 对关键文本使用
text-size-adjust: none（加-webkit-前缀兼容旧版 Safari） - 横屏下 touch-target 至少保持
44px × 44px，可用@media (orientation: landscape) { button { min-width: 44px; min-height: 44px; } }
折叠屏和双屏设备的 orientation 不适用怎么办
Surface Duo、Samsung Fold 等设备横屏时可能报告 portrait，因为其屏幕由两个竖向面板组成。此时 orientation 媒体查询完全不可信。
实操建议：
- 改用
@media (display-mode: standalone)或@media (any-pointer: coarse)作为辅助信号 - 检测
screen.spanning（实验性 API）：if ('spanning' in screen && screen.spanning === 'single-fold-horizontal') { /* 折叠屏横屏 */ } - 最务实的做法：放弃 orientation，直接按容器宽度响应 —— 给关键模块加
container-type: inline-size，用@container (min-width: 600px)控制布局
横屏适配真正的难点不在 orientation 写法，而在于你是否意识到：它只是个弱信号，不是布局决策的唯一依据。设备多样性远超媒体查询的设计预期，别让它成为你样式逻辑的单点故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
