srcset="icon@3x.png 3x"不生效，因需配合src且禁用sizes；仅当dpr恰好为3、无sizes、全用x单位时才选3x图；必须提供真实存在的1x/2x/3x三张图并严格命名。
只写 srcset="icon@3x.png 3x" 不生效，必须配 src 且禁用 sizes
浏览器只在没写 sizes、所有条目都用 x 单位、设备 DPR 恰好为 3 时才选 3x 图。写了 sizes 就立刻切换成宽度匹配模式，3x 被完全忽略。
所以三倍图生效的前提非常窄：src 必须存在（指向 icon@1x.png），srcset 只能包含 x 描述符，且不能混入任何 w 条目或空格/语法错误。
-
src不是可选的——它是老浏览器 fallback，也是 DPR=1 时的主图 -
icon@3x.png文件必须真实存在，构建工具（如 Vite）默认不自动解析@3x后缀，得靠插件或手动 alias - iPhone 15 Pro Max 的 DPR 是 3，但某些 Safari 缩放设置下可能报告 DPR=2.8 或 3.000001，此时不会触发 3x 匹配，而是退到 2x
srcset 里写 3x 却加载了 2x？检查这三点
不是浏览器不认，是条件没凑齐。常见失效原因：
- 页面 CSS 把图标设为
width: 24px，但实际渲染宽度被父容器限制为 20px —— 浏览器按 DPR×渲染宽算所需像素，20×3=60px，而你只提供了 48×48 的@2x和 72×72 的@3x，它可能选更接近的 2x -
srcset中路径写错，比如icon@3x.png404，浏览器静默降级到src或前一个可用项 - 开发时用 Chrome 模拟 DPR=3，但真实 iPhone 上开启「显示缩放」后系统报告 DPR=2，
3x条目直接被跳过
固定尺寸图标怎么写才稳：准备三张图 + 严格命名 + 真实尺寸
例如导航栏设置图标，CSS 设定 width: 24px; height: 24px;，那就必须提供：
-
setting.png：24×24 像素（对应 1x） -
setting@2x.png：48×48 像素（不能是 50×50） -
setting@3x.png：72×72 像素（不能是 70×70）
HTML 写法：<img src="setting.png" srcset="setting.png 1x, setting@2x.png 2x, setting@3x.png 3x" alt="设置">
关键点：src 指向 1x 图，不是“最小图”，而是 DPR=1 时的正确源；浏览器不做缩放，只选源，渲染尺寸仍由 CSS 控制。
真正容易被忽略的是：高分屏适配不止图片
就算 srcset 完美加载了 @3x 图，如果页面里有 <canvas></canvas> 绘图、SVG 内联图标、或 CSS border / box-shadow，它们照样会模糊——因为这些元素不读 srcset，也不受 DPR 自动缩放。
必须手动介入：canvas.width = canvas.clientWidth * window.devicePixelRatio，再调用 ctx.scale(devicePixelRatio, devicePixelRatio)，否则再高清的 @3x 图也救不了画布上发虚的线条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
