高分辨率医疗屏图片模糊的根本原因是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。
高分辨率屏幕（尤其是医疗诊断屏、4K/5K 工作站）上图片模糊、错位、加载浪费，根本不是“加个 srcset 就完事”，而是多个环节必须协同校准：viewport 设置错误会直接废掉 DPR；sizes 写错等于没写；<picture></picture> 顺序或 media 断点不匹配会导致 fallback 失效；Canvas 渲染失真和 CSS 缩放无关，只和 canvas.width/canvas.height 是否按 DPR 同步有关。
viewport 必须禁用缩放但保留 DPR 读取能力
医疗屏严禁用户双指缩放（避免病灶尺寸误判），但又必须让 window.devicePixelRatio 返回真实值。常见错误是把 maximum-scale=1.0 和 user-scalable=no 当成可选配置——它们是硬性组合，缺一不可。
-
content="width=device-width, initial-scale=1.0"单独写，Windows 高 DPI 缩放下会强制 CSS 像素映射到逻辑像素，破坏 DICOM 1:1 像素对应 - 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，且必须是<head>中第一个<meta>标签 - 验证方式：Chrome DevTools → Rendering → “Emulate DPR” 设为 2 或 3，检查
window.devicePixelRatio是否返回设备真实值（不是模拟值）
srcset + sizes 必须按布局宽度匹配，不能混用描述符
浏览器是否启用 srcset 取决于有没有写对 sizes，而且它只认一种描述符：要么全用 w（推荐），要么全用 x，混写就退化为只加载 src。
- 如果目标是适配不同视口下的显示宽度（比如 banner 在手机占 100vw、桌面占 800px），必须用
w+sizes，例如：srcset="img-320.jpg 320w, img-640.jpg 640w, img-1200.jpg 1200w"+sizes="(max-width: 480px) 100vw, (max-width: 960px) 800px, 800px" -
sizes中的800px是 CSS 像素值，浏览器据此计算渲染宽度，再匹配srcset中最接近且不小于它的w值 - 漏写
sizes，或写成sizes="50vw"却没提供对应小图，浏览器只能硬选最近的w，导致小屏加载大图 - Safari 12.1 之前对
w支持不全，旧 iOS 终端可能只按 DPR 粗略匹配，需实测验证
picture 元素失效的三个典型场景
<picture> 不是更高级的 <img>，它是独立的资源选择机制，顺序、断点、格式声明都必须严格对齐真实布局和浏览器能力。
立即学习“前端免费学习笔记（深入）”；
-
<source>必须写在<img>之前，顺序颠倒则整个<picture>被忽略 -
media="(max-width: 768px)"的断点必须和实际 CSS 布局断点一致，比如媒体查询用@media (min-width: 769px)，这里就不能写成768px -
type="image/webp"的<source>若浏览器不支持 WebP，会跳过并尝试下一个，但最终<img src="fallback.jpg">必须存在且能加载成功——很多 404 是因为构建时没生成 fallback 图或路径没 resolve 对
Canvas 渲染模糊和图像容器失真的根源不在 CSS
Canvas 模糊不是 canvas.style.width 没设对，而是缓冲区尺寸（canvas.width/canvas.height）没按 window.devicePixelRatio 缩放；图像容器模糊也不是 max-width: 100% 有问题，而是用了 background-size: cover 或没控制好 object-fit 的触发条件。
- 错误做法：
canvas.style.width = '300px'; canvas.style.height = '200px';—— 缓冲区仍是默认 300×150，拉伸后必然糊 - 正确做法：
const dpr = window.devicePixelRatio || 1; canvas.width = Math.floor(300 * dpr); canvas.height = Math.floor(200 * dpr); ctx.scale(dpr, dpr); - DICOM 图像容器必须用
contain，cover会裁剪 ROI 区域；object-fit: contain仅在父容器有明确宽高时生效，否则不触发 - 滚动条宽度在高分屏下要用
rem（如width: 0.75rem），固定8px在 125% 缩放下细得难点击
真正麻烦的不是某一行代码写错，而是多个环节的参数必须咬合：viewport 控制 DPR 读取，sizes 告诉浏览器布局宽度，srcset 提供对应宽度的图源，Canvas 缓冲区按同一 DPR 缩放，图像容器用 contain 保比例——少一个，高清屏就退回模糊时代。
