Chrome DevTools 模拟 DPR 必须硬刷新才生效，因 Sensors 面板切换 DPR 不触发图片重选，需 Ctrl+Shift+R 强刷；media 断点需避免临界重叠，viewport 缺失会导致 sizes 计算错误，所有 source 未命中时浏览器静默回退至 img src。
Chrome DevTools 里模拟 DPR 必须硬刷新才生效
在设备像素比（DPR）联调中，仅靠 Sensors 面板切换 DPR 值不会触发图片资源重选——浏览器会复用缓存的 currentSrc。必须配合强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R），否则 Network 面板看到的仍是旧请求。
常见误操作包括：
- 改完 DPR 后点普通刷新按钮或回车，结果
currentSrc没变，误判为逻辑失效 - 未清空 Network 面板直接观察，把缓存的 304 请求当成新加载
- 在移动端真机调试时，没关闭 Chrome 的“Disable cache”开关，导致 DPR 切换无响应
Network 面板里看 blocked:mime-type 就是 type 不匹配
<source type="image/webp"> 被跳过，90% 是服务器返回的 Content-Type 响应头与声明不一致。Chrome 会标为 blocked:mime-type，且静默 fallback 到下一条 <source> 或最终 <img>。
验证和修复要点：
立即学习“前端免费学习笔记（深入）”；
- 右键 Network 中被 block 的图片 →
Open in new tab→ 查看响应头里的Content-Type -
image/webp和image/avif对大小写敏感，image/WebP会被拒绝 - Nginx/Apache 需显式配置 MIME 类型，不能依赖文件扩展名自动推断
- CDN 缓存了错误的响应头？需 purge 对应 URL 并检查 origin 回源是否正常
media 断点重叠会导致小屏永远走第一条 source
浏览器按顺序匹配 <source>，遇到第一个 media 为 true 就停。若写成 media="(max-width: 768px)" 和 media="(min-width: 768px)"，在 768px 宽度时前者命中，后者永远不会执行。
安全写法必须用开区间避免临界冲突：
-
media="(max-width: 767px)"→ 手机 -
media="(min-width: 768px) and (max-width: 1200px)"→ 平板 -
media="(min-width: 1201px)"→ 桌面 - 所有
media值必须带完整括号，max-width: 768px（缺括号）直接被忽略
真机联调时 viewport 标签缺失会让 sizes 计算全错
如果 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写、写错位置（如放在 <body> 里）、或 SSR 渲染漏掉，iOS Safari 和 Android Chrome 会以桌面视口（通常 980px）解析布局。此时 sizes="(max-width: 768px) 100vw" 中的 100vw 实际等于 980px，浏览器从 srcset 中挑图完全失准。
排查信号：
- 真机上图片明显撑出屏幕或横向滚动
- DevTools 的 Rendering → Emulate mobile → 设备选 iPhone，但
document.documentElement.clientWidth返回 980 - Network 面板里加载的全是超大尺寸图（比如本该加载 400w 却发了 1920w 请求）
<source> 都没命中时，浏览器不会报错也不会警告，它只是安静地加载 <img src> —— 你得主动打开 Network 面板确认请求路径，而不是凭肉眼判断“看起来像加载了高 DPR 图”。 
