@media 在现代移动浏览器中完全原生支持，但必须正确配置 viewport meta 标签，否则媒体查询因视口未初始化而失效；旧版 webview 和 ios 存在 orientation、hover 等特性解析问题；ie8 及以下不支持 media query，需用条件注释降级。
直接说结论：@media 在现代移动浏览器（Chrome for Android、Safari on iOS 12+、Edge Mobile、Firefox for Android）中完全原生支持，无需 polyfill；但关键前提是必须配好 <meta name="viewport">，否则查询结果会严重失真——这不是兼容性问题，而是视口未初始化导致的计算错误。
viewport meta 标签必须写对，否则媒体查询失效
几乎所有“媒体查询在手机上不触发”的问题，根源都在这行代码没写或写错：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误包括：
-
width=320或width=750等固定值 —— 这会让max-width: 768px永远不匹配，因为视口宽度被硬设为 320px - 漏掉
initial-scale=1.0—— iOS Safari 可能默认缩放，导致device-width计算值偏离物理像素 - 加了
user-scalable=no却没测试手势交互 —— 部分安卓 WebView 在禁用缩放后会误报orientation变化
Android 4.4 WebView 和 iOS 8–11 需要额外注意的特性
这些旧版内核虽支持 @media 基础语法，但对某些媒体特性解析不稳定：
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
-
(orientation: landscape)在 Android 4.4 WebView 中常返回错值，建议改用(min-aspect-ratio: 1/1)辅助判断 -
(hover: hover)在 iOS 9–11 的 Safari 中始终返回false，不能用于检测“是否触屏设备” -
resolution、scripting等特性在所有旧版移动浏览器中基本不可靠，应避免使用
实操建议：只依赖 width、min-width、max-width 和 device-width，它们在 Android 4.0+ / iOS 6+ 全系稳定。
IE8 及以下根本无法运行 media query，别浪费时间修复
IE8 不解析 @media screen and (max-width: 768px) 这类规则，连语法错误都不报——整条规则被静默丢弃。试图用 respond.js 补救只会掩盖更深层问题：
-
respond.js仅模拟媒体查询触发，不修复盒模型、flex、calc()等底层 CSS 支持缺失 - 它要求 CSS 必须同域加载，CDN 或异步注入的样式表会被忽略
- 现代项目已无必要支持 IE8，若真需兼容，请用条件注释加载独立的固定宽度样式：
<!--[if lt IE 9]><link rel="stylesheet" href="ie8-fallback.css"><![endif]-->
不要依赖 autoprefixer 处理 media query
autoprefixer 对 @media 规则本身不做任何转换——它只处理 CSS 属性前缀（如 -webkit-flex）。但容易踩的坑是：
- 误以为开启
browserslist就能“自动兼容旧设备”，其实@media (min-width: 768px)在 IE8 里就是无效语法，加前缀也无意义 - 配置了
"last 2 versions"却忽略了仍在流通的 Android 4.4 系统 WebView（占比约 0.3%），它需要显式加入：android 4.4 - 把
@supports和@media混用，例如@supports (display: grid) { @media (min-width: 768px) { ... } }—— 这在 iOS 10.3 中会因嵌套解析失败而整个块失效
真正影响兼容性的从来不是媒体查询语法本身，而是你写的那些样式规则有没有被目标浏览器理解。查兼容性，先查 flex、gap、aspect-ratio，再查 @media。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
