媒体查询在现代浏览器基本无兼容问题，但IE9–IE11、旧版Safari和部分Android WebView仍存在解析偏差：IE9不支持and组合写法，IE10–11对vh/vw响应滞后；Safari 13.1前prefers-color-scheme等特性支持不全；Android 4.4–6.0 WebView viewport解析不准且不支持dppx。
媒体查询在现代浏览器中基本无兼容问题，但 IE9–IE11、旧版 Safari 和部分 Android 浏览器仍存在解析偏差或缺失支持，关键在于明确目标范围后做针对性处理。
media query 在 IE9–IE11 中的常见失效场景
IE9 支持 @media 但不支持 min-width 和 max-width 的组合写法（如 (min-width: 768px) and (max-width: 1023px)），会直接忽略整条规则；IE10–IE11 虽支持，但对 vh/vw 单位响应滞后，滚动时可能不重算。
- 避免在 IE 中使用
and多条件组合，改用单条件 + JavaScript 补偿：例如用@media (min-width: 768px)单独写桌面样式，再用 JS 判断宽度区间做 class 切换 - IE 下
vh常被计算为视口初始高度（不含地址栏），导致内容截断，可用height: 100dvh替代（IE 不支持，但 Edge 16+ 可用；IE 中 fallback 用height: 100vh+ JS 动态修正） - 不要依赖
@media (hover: hover)在 IE 或旧 Safari 中判断指针设备——它们返回hover: none或直接不识别，应改用@supports (pointer: fine)或特征检测
Safari 13.1 及更早版本对媒体查询的特殊限制
Safari 13.1（iOS 13.4 / macOS 10.15.4）之前，@media (prefers-reduced-motion) 和 @media (prefers-color-scheme) 仅部分生效，且 @media (width) 等基于绝对尺寸的查询无法触发重排。
-
@media (prefers-color-scheme: dark)在 Safari 13.0 中仅影响表单控件，默认不触发自定义 CSS 变量更新，需配合:root媒体查询重新声明变量，例如：@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #e0e0e0; } } - 避免用
@media (width > 768px)（语法错误），Safari 仅支持括号内带单位的写法，如@media (min-width: 768px)；width本身不是合法媒体特性 - 旧 Safari 对
resolution查询（如@media (-webkit-min-device-pixel-ratio: 2)）支持不稳定，优先用@supports (background: image-set(...))检测高清屏
Android WebView 和 Chrome 旧版本的 viewport 陷阱
Android 4.4–6.0 的系统 WebView（基于 Chromium 30–46）对 viewport 元标签解析不准，导致 @media (max-width: 480px) 在横屏时误判，且不支持 dppx 单位。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
<meta name="viewport" content="width=device-width, initial-scale=1">，缺省值在旧 WebView 中可能是width=320，扭曲媒体查询基准 - 避免依赖
@media (resolution: 2dppx)，改用@media (-webkit-min-device-pixel-ratio: 2)并确保 Autoprefixer 已启用android >= 4.4目标 - Android 4.4 WebView 不支持
@media (orientation: landscape)动态响应旋转，需监听window.orientation+resize事件手动切换 class
真正难的不是写对媒体查询，而是确认它在目标环境里是否被解析、是否被重计算、是否和 JS 获取的尺寸一致——尤其当页面含 iframe、缩放或动态插入内容时，这些边界情况容易漏测。
