不可靠。css orientation媒体查询仅基于视口宽高比判断，无法准确反映真实设备方向，且不监听变化，易在缩放、分屏、折叠屏等场景失效；应优先使用screen.orientation api配合javascript动态管理。
orientation媒体查询在现代浏览器中是否可靠？
不可靠。CSS orientation 媒体查询（@media (orientation: portrait) 或 @media (orientation: landscape)）只检测视口宽高比，不反映真实设备方向。当桌面浏览器缩放窗口、或平板横置但未全屏时，它可能返回错误值——比如竖屏手机横握却仍触发 portrait，因为某些 Android 浏览器把状态栏高度计入视口导致宽高比未达阈值。
为什么用 orientation 会漏掉关键场景？
它无法区分以下情况：
• 桌面端用户手动拉宽/拉高窗口
• iOS Safari 在分屏或多任务模式下（如 Slide Over）
• 折叠屏设备处于半开状态（单屏 vs 双屏）
• 用户旋转 iPad 但 Safari 未响应（常见于 PWA 或 iframe 嵌入）
更本质的问题是：orientation 是静态快照，不监听变化。页面加载后方向变了，样式不会自动重算，除非手动触发 resize 事件（但标准行为不保证触发）。
真正可用的替代方案：用 window.matchMedia() + screen.orientation
优先使用 JavaScript 主动探测，再配合 CSS 类切换：
if ('orientation' in screen) {
const updateLayout = () => {
document.body.className = screen.orientation.type.startsWith('portrait')
? 'orientation-portrait'
: 'orientation-landscape';
};
screen.orientation.addEventListener('change', updateLayout);
updateLayout(); // 初始化
} else {
// 降级：监听 resize 并粗略判断（仅作 fallback）
const mq = window.matchMedia('(min-aspect-ratio: 1/1)');
const updateByMq = () => {
document.body.classList.toggle('orientation-landscape', mq.matches);
};
mq.addEventListener('change', updateByMq);
updateByMq();
}
对应 CSS 写法示例：
.container { width: 100%; }
.orientation-portrait .container { max-width: 480px; }
.orientation-landscape .container { max-width: 1200px; }
注意点：
• screen.orientation 在部分 iOS 版本需 HTTPS 或用户手势激活
• matchMedia 的 change 事件在 Safari 中对 orientation 变化不触发，必须依赖 screen.orientation
• 不要混用两种机制做同一逻辑，容易冲突
移动端适配中真正该关注的是什么？
实际项目里，方向只是表象，核心诉求通常是：
• 视口足够宽时显示侧边栏 → 用 min-width 更稳定
• 视频全屏播放时隐藏 UI → 监听 fullscreenchange 事件
• 表单在竖屏下避免键盘遮挡 → 用 visualViewport API 而非 orientation
• 手写笔/触控板操作需要更大点击区域 → 用 @media (pointer: coarse)
orientation 媒体查询只适合做轻量级视觉微调（如图标旋转、文字排版疏密），一旦涉及布局结构变更，就必须转向 JS 主导的状态管理。
最常被忽略的一点：iOS 上 screen.orientation 在页面后台运行时可能冻结，切回前台后不会自动同步最新方向，需要加一次主动读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
