picture标签不自动部署，浏览器根据media、srcset、type匹配资源；需在Chrome DevTools设备模拟或真实设备中验证currentSrc变化，排查语法错误、MIME类型不匹配、断点重叠及路径失效等问题。

直接结论：picture 标签本身不“部署”，它只是声明一组候选资源；真正决定加载哪张图的是浏览器——你得在真实设备或 DevTools 模拟环境下验证 media、srcset、type 是否被正确匹配，否则所有都会被跳过，只显示 。

Chrome DevTools 里怎么模拟不同设备并确认 picture 生效

别信“写了就对”，必须手动触发不同条件并观察 currentSrc 变化：

• 打开 DevTools → ⚙️ Settings → Preferences → Devices → 勾选 “Enable device emulation”
• 用顶部工具栏切换预设设备（如 iPhone 14 Pro、iPad Pro、Pixel 5），或自定义 viewport 宽度 + DPR（例如设为 375px × 2x）
• 刷新页面后，右键 元素 → “Reveal in Elements panel” → 在右侧 Properties 面板展开 currentSrc，看值是否变成你预期的 source（比如 hero-mobile@2x.jpg）
• 如果 currentSrc 始终是 的 src 值，说明所有 都没被选中——立刻去 Network 面板查是否有 blocked:mime-type 或 404

为什么本地测试时总是只加载 而不是

90% 是语法或服务配置问题，不是浏览器不支持：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• media 值缺括号：写成 media="max-width: 768px" ❌，必须是 media="(max-width: 768px)" ✅
• type 和服务器响应头不一致：type="image/webp" 但服务器返回 Content-Type: image/jpeg → Chrome 直接标记为 blocked:mime-type
• 断点重叠或顺序反了：把 media="(max-width: 768px)" 放最前，那宽度为 1200px 的桌面设备永远匹配不到后面的 min-width: 1024px
• <source></source> 没写 srcset 或 srcset 值为空 → 该条被忽略，不参与匹配

用真实设备连 Chrome 远程调试验证高 DPR 场景

DevTools 模拟 DPR 有时不准，尤其涉及 sizes 计算时：

立即学习“前端免费学习笔记（深入）”；

• iOS 设备需用 Safari Web Inspector（macOS 上的 Safari 开发菜单 → 开启 “Develop menu”，再连 iPhone）
• Android 设备用 Chrome 远程调试：手机开启 USB 调试 → 连电脑 → Chrome 地址栏输入 chrome://inspect → 找到页面 → 点 “inspect”
• 在 Console 输入 document.querySelector('img').currentSrc，比看 Network 更可靠——Network 里可能下载了多张图，但只有 currentSrc 是真正在用的
• 特别注意：iOS Safari 对 (min-resolution: 2dppx) 支持极差（直到 iOS 16.4 才部分支持），别在 media 里混用分辨率查询

最容易被忽略的一点：所有 的 srcset 必须指向可访问的真实文件路径，且服务器必须返回正确的 Content-Type；光有 HTML 结构，没有后端配合， 就是空壳。