CSS媒体查询在手机浏览器中失效，90%是viewport标签错误：必须位于<head>最顶部、含width=device-width和initial-scale=1.0、且全页面唯一；@media语法需严格正确；真机用document.documentElement.clientWidth验证；样式覆盖和特异性问题也需排查。
浏览器只执行一次匹配，不回退也不叠加
media 和/或 type 同时满足，浏览器就立即选用它的 srcset（或 src），然后彻底跳过后续所有 srcset。这不是“多条件组合”，也不是“fallback 链”，而是硬性单选。
-
media="(max-width: 767px)"匹配成功 → 加载该的 srcset，的
srcset完全不参与计算 - 所有
的 media都不为真 → 浏览器才退到，此时才用它的
src和srcset - 某个
的 type="image/webp"与响应头Content-Type: image/jpeg不一致 → 该被静默忽略，继续看下一个
img 是强制 fallback，不是可选组件
没有src，页面对应位置就是空白（Safari 16.4 之前甚至不触发任何请求）。这不是兼容性问题，是规范强制要求：
-
必须是
的**最后一个子元素** -
必须带
src（否则旧浏览器和降级场景直接无图） -
最好也带
alt（语义与可访问性必需） -
可以同时带
srcset和sizes，但仅在所有失效时生效
srcset 中的 x 描述符只在 img 或匹配成功的 source 上起作用
很多人误以为在srcset="a@2x.jpg 2x" 就能触发 DPR 选择——其实不会。浏览器对 srcset 只做「路径解析」，不做 DPR 匹配；DPR 决策只发生在两个地方：
- 匹配成功的
的 srcset（此时它等价于一个临时）
- 最终
的
srcset（当所有都未命中时）
所以以下写法是错的：
<source media="(max-width: 480px)" srcset="mobile@2x.jpg 2x">它只会加载
mobile@2x.jpg，不管设备是 1x 还是 3x。正确写法必须包含完整密度梯度：
<source media="(max-width: 480px)" srcset="mobile@1x.jpg 1x, mobile@2x.jpg 2x, mobile@3x.jpg 3x">
media 查询失效的三个隐形开关
media 不生效，往往不是逻辑错，而是被底层规则直接屏蔽：
- 缺括号：
media="max-width: 768px"→ 整个被忽略（必须写成 media="(max-width: 768px)"） - 单位缺失：
media="(max-width: 768)"→ 非法媒体查询，静默跳过 - 断点重叠：
media="(max-width: 768px)"和media="(min-width: 768px)"在恰好 768px 宽时行为不可控，推荐用开区间：767px / 768px / 1201px
真正难调的不是语法，是 media 查询在不同设备上对 viewport width 的实际解析值、CDN 是否透传 Accept 头、以及图片服务返回的 Content-Type 是否与 type 属性完全一致——这些地方出问题，Network 面板里连请求都不会发。
