的srcset不生效，根本原因是其本身不直接匹配高屏分辨率，仅响应DPR和视口宽度；若设备DPR为1、Safari版本不支持或未带合法media/type，浏览器将忽略2x描述符而回退至。
为什么 <picture></picture> 的 srcset 不生效？
多数时候不是写错了，而是浏览器没按预期选图——根本原因是 srcset 本身不直接匹配“高屏分辨率”，它只响应 device-pixel-ratio（DPR）和视口宽度。如果你写了 srcset="img@2x.jpg 2x" 却加载了普通图，大概率是当前设备 DPR 为 1，或浏览器忽略 x 描述符（比如在某些 Safari 版本中未启用 <source></source> 的 media 条件时）。
-
<source></source>必须带media或type，否则会被跳过；仅靠srcset+2x不足以触发高分图加载 - DPR 不等于屏幕 PPI，iPhone 14 Pro 在缩放设置为“更大文本”时 DPR 可能回落到 2，而非标称的 3
- Chrome 桌面版默认 DPR=1，即使显示器是 4K —— 它只看系统缩放比例，不是物理像素密度
<picture></picture> 中正确匹配高分屏的写法
真正可靠的方案是组合 media 查询与 x 描述符，让浏览器在 DPR ≥ 2 且满足最小宽度时才启用高分资源。
<picture> <source media="(min-resolution: 2dppx)" srcset="hero@2x.jpg" /> <source media="(min-resolution: 192dpi)" srcset="hero@2x.jpg" /> <img src="hero.jpg" alt="hero" /> </picture>
-
2dppx是标准写法，兼容现代 Chrome/Firefox/Safari；192dpi是等价 fallback（因为 192 ÷ 96 = 2），用于旧 Edge 或部分安卓 WebView - 不要混用
srcset和media在同一个<source></source>里——srcset用于宽度适配，media才管分辨率条件 -
<img alt="HTML代码中picture匹配高屏分辨率加载图片" >的src是兜底，不是可选；没有它，<picture></picture>在不支持的环境里会空白
如何验证是否真加载了高分图？
别信开发者工具 Network 面板里显示的文件名，要确认实际请求的是哪张图——因为缓存、CDN 重写或 Service Worker 都可能干扰。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 在 Network 面板过滤
img，右键请求 → “Open in new tab”，检查响应头Content-Length和图片实际像素尺寸 - 用
window.devicePixelRatio控制台打印当前 DPR，再对照<source></source>的media条件是否匹配 - 禁用缓存后硬刷新（Cmd+Shift+R），避免因 304 响应误判
移动端 Safari 的特殊坑
iOS 16.4+ 开始，Safari 对 min-resolution 的解析更严格：如果页面有 <meta name="viewport"> 且 initial-scale 被设为非 1 值（比如 initial-scale=1.0 后面多空格），2dppx 可能完全不匹配。
立即学习“前端免费学习笔记（深入）”；
- 确保 viewport 写成
<meta name="viewport" content="width=device-width, initial-scale=1">，不要加多余空格或单位 - 测试时关闭“设置 → 辅助功能 → 显示与文字大小 → 粗体文本/更大的辅助选项”，这些会改变 DPR 计算逻辑
- 真机调试比模拟器可靠——Xcode 的 Web Inspector 能看到真实的资源请求链路
2x 很容易漏掉 DPR=3 的场景，而过度依赖 srcset 宽度又会让高分小屏设备加载大图。最稳的做法是用 min-resolution + 兜底 img，再加一层 JS 动态 fallback。 
