安卓机媒体查询失效主因是viewport标签未生效，需确保其位于head最顶部、含width=device-width和initial-scale=1.0、无重复冲突，且避免user-scalable=no引发兼容问题。
媒体查询在部分安卓机上失效，大概率不是代码写错了，而是 viewport 标签没起作用——它被忽略、覆盖或写错位置了。
为什么真机不生效但 DevTools 模拟正常
Chrome DevTools 的响应式模拟器默认补全 viewport 行为，哪怕你 HTML 里压根没写，它也会“假装”有。但真实安卓 WebView（比如微信、QQ 浏览器、系统自带浏览器）严格按 HTML 实际内容执行：漏了就是漏了，不会宽容。
- 打开真机调试（如 Chrome 远程调试），运行
document.documentElement.clientWidth，若返回值是980或远大于设备逻辑宽度（如 360/414/390），说明viewport完全没生效 - 某些安卓 WebView 对
user-scalable=no敏感，加了反而触发兼容性降级，建议先去掉测试 - Next.js、UniApp 等框架可能自动生成
viewport，但如果你又手动写了重复的，后加载的会覆盖前一个——查最终 HTML 源码确认只有一条且位置正确
viewport 标签必须满足的三个硬条件
viewport 不是“写了就行”，它必须同时满足：位置对、属性全、无冲突。
- 必须放在
最顶部，且**在任何 CSS 引入之前**（包括<style></style>标签前） - 必须包含
width=device-width和initial-scale=1.0，缺一不可；width=320或width=1200这类固定值会让所有max-width断点失效 - 避免混用多个
viewport标签：CMS、插件、模板可能悄悄注入一条，和你写的冲突；最终页面源码中应仅存在一条，且内容为<meta name="viewport" content="width=device-width, initial-scale=1.0">
安卓 WebView 特有的坑：initial-scale 被忽略或重置
部分安卓 WebView（尤其旧版 UC、X5 内核）会无视 initial-scale=1.0，导致视口仍以桌面模式渲染。这不是媒体查询的问题，而是视口基准失准。
- 可临时加
minimum-scale=1.0, maximum-scale=1.0强制锁定（注意：这会禁用双指缩放，仅用于验证是否为 scale 导致） - 更稳妥的做法是用 JS 补位：
if (navigator.userAgent.includes('Android')) document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0') - 不要依赖
user-scalable=no掩盖问题——它不修复视口逻辑，反而让调试更难，且影响无障碍访问
断点值与安卓设备逻辑宽度不匹配
安卓机型碎片化严重，逻辑宽度（CSS 像素）范围广：低端机可能是 320px，Pixel 7 是 412px，折叠屏展开后可达 720px+。只设 max-width: 480px 会漏掉大量设备。
- 优先用移动优先写法：默认样式适配小屏，再用
@media (min-width: 481px)覆盖中大屏，避免死守max-width单一断点 - 关键断点建议覆盖：360px（多数中端安卓）、412px（Pixel 系列）、480px（传统小屏上限）、768px（平板竖屏）
- 别信“物理分辨率”，查设备的
window.innerWidth值才是真实依据；有些 1080p 屏幕逻辑宽度只有 360px（因 DPR=3）
viewport 是媒体查询的开关，不是装饰。它一旦失效，后面所有 @media 规则都在真空里运行——语法再对、断点再准，也毫无意义。真机调试时第一件事，永远是确认 document.documentElement.clientWidth 的值是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
