移动端css媒体查询不生效，90%以上因viewport meta标签缺失、位置错误或重复；必须唯一且置于head最前，禁用max-device-width而改用max-width，并排除css语法错误与优先级冲突。
移动端 CSS 媒体查询不生效，90% 以上是 viewport meta 标签没配对、没放对位置，或者压根没写。
viewport 标签必须唯一且位于 最顶部
浏览器解析 HTML 是顺序执行的。一旦它在 开头没看到 <meta name="viewport">，就会立刻启用“桌面模拟模式”——布局视口固定为 980px，此时 @media (max-width: 768px) 永远不会触发，因为视口宽度根本不是 768。
- 检查源码（右键 → 查看页面源代码），确认
<meta name="viewport" content="width=device-width, initial-scale=1.0">是内第一个或第二个标签，前面只有<meta charset>或<title></title> - 禁止 JS 动态插入：
document.head.innerHTML += '...'或document.write()在 Safari 中基本无效 - Next.js / Nuxt 等框架要注意：服务端模板可能因注释、占位符或 SSR 渲染顺序把 viewport 标签挤到后面，必须验证最终 HTML 源码
- 重复声明时，浏览器只认第一个；CMS 或插件自动注入第二个 viewport，会覆盖你写的，导致失效
别用 max-device-width，改用 max-width
max-device-width 在 iOS/iPadOS/macOS Safari 中已不可靠：系统返回的是逻辑像素而非物理分辨率，且该媒体特性已被 W3C 弃用。你写的 @media (max-device-width: 768px) 在现代 Safari 里大概率不匹配。
- 一律改用
@media (max-width: 768px)—— 它基于当前视口宽度，可响应缩放、分屏、DevTools 调整 - 注意：
initial-scale会影响视口计算。比如设了initial-scale=0.5，那100vw就等于 2 倍设备宽度，断点值需同步上调 - 不要依赖
device-pixel-ratio做布局判断——它不随缩放重算，也不响应式更新
CSS 语法错误会静默吞掉整个 @media 块
媒体查询不是独立模块，它和普通 CSS 共享同一解析上下文。前面一行 CSS 出错（比如 @keyframes 缺 }、属性漏分号、括号不匹配），浏览器可能直接跳过之后所有规则，包括整个 @media 块。
- 打开 Safari 开发者工具（macOS + iOS 配对调试），在 Console 里看有没有
Parse error或Invalid CSS property name - 临时删掉所有非必要 CSS，只留
viewportmeta + 一条最简媒体查询，例如：@media (max-width: 768px) { body { background: red } }，确认是否生效 - 避免在 CSS 文件中嵌套
@media：像.box { @media (...) { ... } }是非法语法，纯 CSS 不支持，Safari 会直接忽略
优先级冲突和选择器特异性不足
即使语法全对、viewport 正确，媒体查询也可能被更高优先级的基础样式覆盖。尤其当基础规则用了 !important，或者选择器更具体（如 div#app .header vs .header），媒体查询就“输在起跑线”。
- 避免在通用基础样式中滥用
!important；若已存在，媒体查询里也得加，但这只是临时诊断手段 - 把
@media块放在整个 CSS 文件末尾，确保书写顺序上后于基础样式 - 提升选择器特异性：用
body .header替代.header，比堆!important更可靠 - 别用通配符
*在媒体查询里，Safari 对它的渲染行为不稳定，还容易被用户代理样式覆盖
真正卡住人的地方往往不是断点值算错，而是 viewport 标签在源码里“隐身”了——被框架模板吞掉、被 CMS 插件覆盖、被空格或换行破坏了 content 属性格式。真机测试前，务必右键查看源代码，亲手确认那一行 <meta name="viewport"> 是否真实存在、是否干净、是否够靠前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
