媒体查询在手机上失效的主因是viewport标签未生效——必须置于head最顶部、内容完整（width=device-width+initial-scale=1.0）、不可动态插入或重复添加，且需排除CSS解析错误。
媒体查询在手机上不起作用，90% 以上不是 CSS 写错了，而是 <meta name="viewport"> 标签根本没生效——它被忽略、覆盖、写错位置，或属性不全。
viewport 标签必须出现在 <head> 最顶部
浏览器解析 HTML 是顺序执行的。一旦它在 <head> 开头没看到 <meta name="viewport">，就会立刻启用桌面模拟模式（layout viewport = 980px），此时所有 @media (max-width: 768px) 都不会触发。
- 检查最终 HTML 源码（右键 → 查看页面源代码），确认该标签是
<head>内第一个或第二个标签，前面只允许有<meta charset>或<title> - 禁止用 JS 动态插入：
document.head.innerHTML += '...'或document.write()在 Safari 和多数安卓 WebView 中完全无效 - Next.js、UniApp、Nuxt 等框架可能自动生成 viewport，但如果你又手动加了一条，后加载的会覆盖前一个——最终源码中必须只有一条，且内容正确
content 属性缺一不可：width=device-width + initial-scale=1.0
width=device-width 和 initial-scale=1.0 必须同时存在。漏掉任意一个，视口基准就失准，断点计算直接失效。
- 错误写法：
<meta name="viewport" content="width=device-width">—— iOS Safari 会强制缩放，导致视口宽度失真 - 更糟写法：
<meta name="viewport" content="width=320">—— 固定像素值锁死视口，max-width: 480px永远不匹配 - 不要加
user-scalable=no来“掩盖问题”：它不修复视口逻辑，反而触发安卓 WebView 兼容性降级，还影响无障碍访问
别用 max-device-width，改用 max-width
max-device-width 在现代 iOS/iPadOS/macOS Safari 中已实质弃用。系统返回的是逻辑像素而非物理分辨率，且该特性被 W3C 标准移除。
立即学习“前端免费学习笔记（深入）”；
- 你写的
@media (max-device-width: 768px)在 iPhone 14 Pro 上根本不会触发 - 一律替换为
@media (max-width: 768px)—— 它基于当前视口宽度，可响应缩放、分屏、横竖屏切换 - 注意：
initial-scale会影响断点值。比如设了initial-scale=0.5，那100vw就等于 2 倍设备宽度，原max-width: 768px得改成max-width: 1536px
CSS 文件加载失败或语法错误会静默吞掉整个 @media 块
媒体查询不是独立模块，它和普通 CSS 共享同一解析上下文。前面一行 CSS 出错（比如 @keyframes 缺 }、属性漏分号、括号不匹配），浏览器可能直接跳过之后所有规则，包括整个 @media 块。
- 打开 Safari Web Inspector 或 Chrome 远程调试，在 Console 查看是否有
Parse error或Invalid CSS property name - 临时删掉所有非必要 CSS，只留
<meta name="viewport">和一条最简媒体查询：@media (max-width: 768px) { body { background: red } }，确认是否生效 - 检查网络面板，确认 CSS 文件状态码是 200 且内容完整；Parcel/Vite 等构建工具可能误拆文件或压缩时删掉未用规则（如 cssnano 的
discardUnused）
真正容易被忽略的点是：viewport 不是“写了就行”的装饰标签，它是媒体查询运行的前置开关。漏掉它，后面所有断点、嵌套、特异性优化，全在真空里执行。
