不可靠，orientation媒体查询在多数现代浏览器中仅参考初始值，不实时响应旋转；ios safari甚至忽略其动态变化，仅在加载或首次切换时触发一次匹配，无法用于实时样式切换。
orientation媒体查询在移动端是否可靠
不可靠，orientation 媒体特性在多数现代浏览器中已退化为“仅参考 window.screen.orientation 的初始值”，而非实时响应旋转。iOS Safari 甚至完全忽略该查询的动态变化，哪怕 window.screen.orientation 自身是准确的。它只在页面加载或横竖屏首次切换时触发一次匹配，之后不再更新。
这意味着：@media (orientation: landscape) 可能始终为真（比如设备以横屏打开页面），或始终为假（竖屏打开后旋转也不生效）——不能用于实时样式切换。
替代方案：用 window.screen.orientation + resize 事件监听方向变化
真正可用的方式是监听 resize 或 orientationchange（iOS 专属，但已废弃且不触发重排），再结合 window.screen.orientation.type 判断当前朝向。注意：resize 并非每次旋转都触发（尤其 iOS），所以需配合防抖和主动检测。
-
window.screen.orientation.type返回"portrait-primary"、"portrait-secondary"、"landscape-primary"或"landscape-secondary" - 推荐用
screen.orientation.angle（返回 0/90/180/270）判断更稳定，但需检查支持性：'orientation' in screen - 监听
resize后加 100ms 防抖，再读取screen.orientation.type，避免频繁误判 - 首次加载也应立即执行一次方向检测并设 body class，例如：
document.body.classList.add('orient-landscape')
如何用 CSS 锁定「仅横屏生效」的样式块
不要依赖 @media (orientation: landscape)，改用 JS 动态添加 class 到 或 ，再写对应 CSS：
document.documentElement.classList.toggle('is-landscape', angle === 90 || angle === 270);
然后在 CSS 中写：
.is-landscape .video-player { width: 100vw; height: 56.25vw; }
关键点：
- 避免用
max-width/min-height模拟方向判断——屏幕尺寸重叠（如 iPad 竖屏宽 768px > iPhone 横屏宽 414px）会导致误匹配 - 若需服务端预判，只能靠 UA + viewport width/height 组合粗略估计，无法 100% 准确
- 某些安卓 WebView 不暴露
screen.orientation，需 fallback 到window.innerWidth > window.innerHeight（仅作保底，不严谨）
为什么 orientationchange 事件不推荐作为主逻辑
这个事件在 iOS 上行为异常：它可能在未真正旋转时触发（比如弹出键盘），也可能在旋转后延迟数秒才触发，甚至被系统静默丢弃。Chrome for Android 已完全移除此事件。MDN 明确标注其为“非标准且不推荐使用”。
实际项目中更稳妥的做法是：
- 监听
resize（兼容性最好） - 同时监听
screen.orientation.onchange（如果存在） - 两者都触发时，以
screen.orientation.angle为准 - 对角度变化做阈值判断（比如从 0° → 85° 就认为进入横屏，避免抖动）
横竖屏不是二元开关，而是连续状态；真正难处理的永远是中间过渡帧和系统权限限制（比如 PWA 被禁止访问 orientation API）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
