orientation媒体查询不生效主因是设备未触发orientation变化事件，现代浏览器依赖window.orientation或宽高比判定，而安卓webview和pwa中该值常被弃用或固定为0；应优先使用aspect-ratio或宽高比组合替代。
orientation媒体查询为什么有时不生效
直接写 @media (orientation: landscape) 却没反应，大概率是设备没触发 orientation 变化事件——现代浏览器（尤其是 iOS Safari）对 orientation 的判定依赖 window.orientation 或屏幕宽高比，而很多安卓 WebView 和 PWA 环境下该值被弃用或固定为 0。更可靠的方式是用宽高比较：@media (min-width: 600px) and (max-height: 400px) 这类组合，而非单纯依赖 orientation。
实际开发中建议：
- 优先用
@media (min-width: Xpx)+aspect-ratio（如aspect-ratio: 16/9）做兜底，aspect-ratio在 Chrome 88+、Safari 15.4+、Firefox 111+ 已稳定支持 - 避免在桌面端依赖
orientation，它在非移动设备上始终返回portrait - iOS Safari 中，即使横屏，
orientation也可能延迟触发或跳过中间状态，需配合window.matchMedia监听并加防抖
如何监听屏幕旋转并动态更新布局
纯 CSS 的 orientation 是静态匹配，无法响应式重绘某些 JS 控制的 DOM 结构（比如 Canvas 尺寸、第三方图表容器）。这时得靠 JS 主动响应：
const mql = window.matchMedia('(orientation: landscape)');
const updateLayout = () => {
if (mql.matches) {
document.body.classList.add('landscape');
document.body.classList.remove('portrait');
} else {
document.body.classList.add('portrait');
document.body.classList.remove('landscape');
}
};
mql.addEventListener('change', updateLayout);
updateLayout(); // 初始化
注意点：
- 不要用
window.onorientationchange—— 它在 Chrome 93+ 已废弃，且 iOS Safari 中行为不稳定 -
matchMedia返回的mql.matches是实时值，但首次调用时未必反映当前状态，务必手动执行一次updateLayout() - 若页面有 iframe，其内部
matchMedia不继承父窗口方向，需单独监听
横竖屏切换时图片/视频拉伸变形怎么办
常见问题是：CSS 设置了 width: 100%; height: 100%，横屏后内容被强行撑开。根本原因在于 viewport 缩放和元素盒模型未随方向重置。
推荐做法：
- 对媒体元素统一加
object-fit: contain或cover，避免拉伸；配合aspect-ratio: 4/3锁定比例 - 在横屏 class 下重设容器
max-width和padding，例如：.landscape .hero-image { max-width: 80vw; padding: 0 5vw; } - 禁用用户缩放（
<meta name="viewport" content="user-scalable=no">）会干扰 orientation 检测，慎用
React/Vue 项目里怎么封装 orientation 响应逻辑
别每个组件都写一遍 matchMedia，抽成自定义 Hook 或 Composition API：
// React
function useOrientation() {
const [orientation, setOrientation] = useState('portrait');
useEffect(() => {
const mql = window.matchMedia('(orientation: landscape)');
const onChange = () => setOrientation(mql.matches ? 'landscape' : 'portrait');
mql.addEventListener('change', onChange);
onChange();
return () => mql.removeEventListener('change', onChange);
}, []);
return orientation;
}
// 使用：const dir = useOrientation(); // 返回 'landscape' 或 'portrait'
关键细节：
- Vue 3 的
onMounted/onUnmounted必须配对清理 listener，否则切换路由时内存泄漏 - 服务端渲染（SSR）环境下，
window不存在，需加if (typeof window !== 'undefined')判断 - 测试时不能只靠
jest.mock('window.matchMedia')，要真实触发mql.dispatchEvent(new Event('change'))
orientation 不是银弹。真正在意体验的地方，比如视频全屏、表单键盘弹出、地图手势，得结合 screen.orientation API、resize 事件、甚至陀螺仪数据交叉验证。CSS 层面能做的，是守住比例、留白和断点的基本盘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
