Firefox无视srcset的常见原因是sizes语法错误（如括号后空格、单位缺失、混用w/x描述符）或srcset未覆盖足够宽的源，导致浏览器退化为100vw计算并加载错图。
Firefox 无视 srcset 的常见原因
Firefox（尤其是旧版或开发者版）对 sizes 语法异常敏感，一个空格、括号内多一个空格、单位缺失，都会导致整个 sizes 被丢弃，进而让 srcset 退化为仅按 100vw 计算——结果就是窄屏加载大图、横屏加载小图。
常见错误现象：currentSrc 始终指向 src 或最大尺寸图，Network 面板里只看到一张图被请求；Computed 标签页中 sizes 显示为 none 或解析失败。
-
sizes="(max-width: 768px) 100vw, 50vw"❌ —— Firefox 会因括号后空格拒绝解析，必须写成(max-width:768px) -
sizes="100vw"❌ —— 缺少媒体条件，Firefox 不报错但不触发宽度适配逻辑，回退到默认行为 -
sizes="(min-width: 768px) 50vw, 100vw"✅ —— 但注意：最后一项不能带条件，否则整条失效 -
sizes="(max-width:768px) 100vw,(min-width:769px) 50vw"✅ —— 条件必须互斥且覆盖全范围，Firefox 不支持and连接
Firefox 对 w 描述符的兼容性边界
Firefox 自 64 版起全面支持 w 描述符 + sizes，但 Safari 12.1 之前、部分 Android WebView（如旧版 Chrome for Android）仍存在解析差异。如果你在 Firefox 中表现正常，但在其他浏览器异常，大概率是 sizes 字符串本身有隐性语法问题，而非 Firefox 独有 bug。
关键验证点：打开 DevTools → Elements → 选中 img → 查看 Computed 面板里的 currentSrc 和 sizes 值。若 sizes 显示为空或非法，则响应式逻辑根本没启动。
- 用
console.log(img.currentSrc)打印实际加载地址，比 Network 面板更可靠 - 不要依赖设计稿标注的“768px 断点”，而要用 DevTools 拖动视口宽度，观察布局真实崩坏点（比如 623px 卡住栅格），再设
(max-width:640px) - Firefox 不支持
sizes中使用%单位（如50%），只认vw、px、em等 CSS 长度单位
为什么 sizes 写对了，Firefox 还加载错图？
因为 Firefox 严格遵循「选择最接近且不小于显示宽度 × DPR 的候选图」规则。如果 srcset 中缺少足够宽的源，它宁可放大低分辨率图，也不会加载更小的源——这在高 DPR 设备上尤其明显。
例如：sizes="(max-width:768px) 100vw, 50vw"，在 2x Retina 屏、视口 800px 宽时，目标物理像素 = 50vw × 2 = 400px；但若 srcset 只有 "small.jpg 320w, medium.jpg 640w"，它会选 640w（够用），但如果只有 320w，Firefox 就会加载它并拉伸，而不是报错或降级。
- 确保
srcset中每个w值都大于等于对应sizes区间 × 最高预期 DPR（通常取 3x） - 避免混用
w和x：如srcset="a.jpg 400w, b.jpg 2x"在 Firefox 中直接被忽略整条属性 - 不要省略
src：Firefox 对不支持srcset的场景仍依赖它兜底，尤其在禁用 JS 或早期版本中
调试时最容易忽略的细节
Firefox 的响应式图片逻辑完全基于 CSS 布局计算，而不是 DOM 尺寸或 JS 测量。这意味着：如果图片容器本身 width 是 auto、或被 flex/grid 挤压、或父元素未设 width，sizes 中写的 50vw 就可能和实际渲染宽度严重偏离。
真正决定浏览器怎么选图的，不是你写了什么，而是它「认为」这张图会占多宽——而这个判断发生在 layout 阶段，早于 JS 执行。
- 用 DevTools 的 Layout Inspector（或勾选 “Show layout bounds”）确认图片容器的真实宽度是否与
sizes值匹配 - 如果用了 CSS Grid 或 Flex，
sizes必须反映该上下文下的最终显示宽度，不能照搬设计稿的“列宽” - viewport meta 标签缺失时，某些 Android Firefox 可能误判
vw，务必检查是否漏了<meta name="viewport" content="width=device-width">
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
