高分屏图像模糊的根本原因是viewport、srcset/sizes、canvas缓冲区、图像容器等多环节未协同校准：viewport必须设maximum-scale=1.0+user-scalable=no以保留dpr；sizes须写死css像素值且与srcset的w描述符严格匹配；canvas需按dpr缩放width/height并ctx.scale(dpr,dpr)；dicom图像容器必须用contain而非cover。
只加 srcset 或只设 max-width: 100%，高分屏照样模糊——关键环节漏一个，DPR 就被废掉。
viewport 必须禁用缩放但保留真实 DPR
医疗屏、4K 工作站上图片失真，第一关就卡在 <meta>。常见错误是只写 width=device-width, initial-scale=1.0，这会导致 Windows 高 DPI 缩放或 iOS “更大文本”设置下 window.devicePixelRatio 返回 1，而非设备真实值（如 2 或 3）。
必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
且该标签必须是 中第一个 <meta>。验证方式：DevTools → Rendering → Emulate DPR 设为 2，刷新后运行 console.log(window.devicePixelRatio)，输出应为 2（不是 1）。
- 漏掉
maximum-scale=1.0或user-scalable=no，iOS Safari 可能强制降级 DPR - 这个配置不是“可选优化”，而是高分屏下所有响应式逻辑的前提
- Chrome 桌面版默认 DPR=1，不反映显示器物理 PPI，只看系统缩放比例
srcset + sizes 必须严格按 CSS 像素宽度匹配
srcset 里的 w 描述符不看设备分辨率，只看 sizes 告诉浏览器“这张图在页面里会渲染多宽（CSS px）”，再挑最接近且不小于该宽度的源。混用 x 和 w、漏写 sizes、或 sizes 值与实际布局脱节，都会导致加载浪费或模糊。
例如 banner 在手机占满宽度、桌面固定 800px：
@@##@@
-
sizes="(max-width: 480px) 100vw→ 小屏下浏览器预估图宽 ≈ 480px，选img-640.jpg（640 ≥ 480） -
sizes="800px"是 CSS 像素值，不是百分比，也不是设备像素 - 如果只写
srcset="icon@2x.png 2x"却没配sizes，浏览器只按 DPR 匹配，小屏 DPR=1 时仍加载@2x，纯属浪费
的 source 必须带 media 或 type 才生效
<picture></picture> 不是 <img src="img-800.jpg" srcset="img-320.jpg 320w, img-640.jpg 640w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 800px, 800px" alt="banner"> 的升级版，它靠顺序匹配和显式条件触发。只写 <source srcset="img@2x.jpg 2x"></source>，没有 media 或 type，现代浏览器直接跳过该 <source></source>，回退到末尾的 <img>。
要真正适配高分屏，得组合条件：
<picture><source media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 2)" srcset="hero-1200@2x.jpg" type="image/jpeg"><source media="(min-width: 768px)" srcset="hero-1200.jpg"><source media="(max-width: 767px)" srcset="hero-mobile.jpg"> @@##@@ </source></source></source></picture>
-
media中的-webkit-min-device-pixel-ratio: 2是 Safari/Chrome 的可靠写法，比单纯2x更可控 - 未匹配任何
<source></source>时，<img src>是唯一 fallback，必须存在且可用 - 旧版 Safari（12.1 之前）对
w支持不全，2x+media组合更稳妥
Canvas 渲染模糊和 CSS 无关，只跟 width/height 属性有关
Canvas 在高分屏上糊，90% 是因为只改了 style.width/style.height，没同步改 canvas.width 和 canvas.height。CSS 控制显示尺寸，这两个属性才决定绘图缓冲区大小。
正确做法：
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width * dpr);
canvas.height = Math.floor(rect.height * dpr);
canvas.style.width = `${rect.width}px`;
canvas.style.height = `${rect.height}px`;
<p>const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr); // 否则所有坐标都要手动 × dpr</p>
- 漏掉
ctx.scale(dpr, dpr)，画出来的矩形、文字位置全错 - 必须监听
resize和orientationchange，iOS 旋转后布局重排但dpr不变，容易漏重设 - 不要用
devicePixelRatio做媒体查询替代品，它只是轻量信号，不能覆盖所有缩放场景
高分屏适配的复杂点不在单个 API 怎么写，而在于 viewport、sizes、DPR、canvas.width/height 这四者必须同步校准——任一环节松动，清晰度就断链。最容易被忽略的是 sizes 值是否真实反映 CSS 渲染宽度，以及 <source></source> 是否带有效 media 条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
