canvas模糊与坐标偏移的根本原因是devicepixelratio不匹配：需用canvas.width/height乘dpr提升物理像素，再通过ctx.scale(dpr,dpr)保持逻辑坐标系，否则绘图会拉伸模糊或右下偏移。
Canvas绘图模糊和坐标偏移是DPI适配的典型症状
高DPI屏幕（如Retina、4K显示器）上Canvas内容模糊、文字锯齿、点击区域错位，根本不是CSS栅格的问题，而是Canvas自身渲染机制与设备像素比（devicePixelRatio）不匹配所致。浏览器把Canvas的width/height属性当作物理像素数，但CSS尺寸按逻辑像素计算——当devicePixelRatio > 1时，若不做缩放，就会拉伸模糊；若只放大尺寸又不调整绘图上下文，所有ctx.fillRect(0,0,100,100)都会往右下偏移。
- 先读取
window.devicePixelRatio，别硬写2或3 - 用
canvas.width = canvas.offsetWidth * dpr和canvas.height = canvas.offsetHeight * dpr重设内部尺寸 - 立即调用
ctx.scale(dpr, dpr)，让后续所有坐标仍按CSS像素书写 - 避免在
resize事件里反复scale——每次重设width/height会重置上下文，必须重新scale
Grid/Flex容器本身不感知DPI，但子元素可能出问题
CSS Grid和Flex布局本身是逻辑像素驱动的，不会因DPI变化而错列。但如果你在栅格项里嵌了Canvas、SVG或固定px字体的文本，这些“内部元素”就可能模糊或错位。尤其常见于：用grid-template-columns: repeat(3, 1fr)排三列，每列里放一个<canvas width="300" height="200"></canvas>——此时Canvas物理像素不足，画布边缘发虚，且鼠标事件坐标未校正。
- 栅格容器（
display: grid）无需为DPI加额外样式，它只管逻辑布局 - 但每个含Canvas/SVG的栅格项，必须单独做DPI适配，不能指望父容器“传导”分辨率
- 避免对Canvas设置
transform: scale()来“修复”模糊——这会导致事件坐标进一步失真 - 若用
rem或vw控制Canvas外层容器尺寸，Canvas内部仍需独立处理dpr
viewport和字体渲染在HiDPI下容易被忽略
即使栅格布局整齐，文字也可能在高DPI屏上显得发虚或过小，这不是栅格失效，而是viewport配置和字体单位没跟上。iOS Safari在devicePixelRatio=3时若initial-scale写错，会强制用桌面视口渲染，导致整个页面缩放异常；而用px写font-size，在2x屏上实际渲染为2倍物理像素，但字重没变，视觉上就“稀薄”了。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">必须拼写准确——intial-scale是常见手误 - 字体优先用
rem或clamp(1rem, 2.5vw, 1.5rem)，禁用纯px - 对图标字体（如Font Awesome），确保其
font-size也用相对单位，否则在高DPI下图标边缘毛刺 - 不要依赖
screen.width/screen.height判断DPI——它们返回的是设备原始分辨率，不是当前缩放状态
IE11/旧Safari对gap和auto-fit的降级会掩盖DPI问题
当用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))构建响应式栅格时，在IE11或Safari 12以下浏览器中，因不支持auto-fit或gap，你得回退到repeat(3, 1fr)加媒体查询。但这个降级过程若没同步处理Canvas和字体，就会在旧设备上暴露DPI适配断层：比如新浏览器里Canvas清晰，IE11里却糊成一片——因为降级代码里漏了dpr适配逻辑。
- 降级方案（如IE11用
grid-column-gap代替gap）只解决布局兼容性，不解决渲染精度 - Canvas DPI适配代码必须无条件执行，不管浏览器是否支持Grid
- 对旧浏览器，可用
document.documentElement.clientWidth * window.devicePixelRatio粗略估算可用物理宽度，辅助Canvas尺寸计算 - 避免用
@supports (display: grid)包裹DPI适配逻辑——它不涵盖Canvas上下文操作
DPI适配不是一次配置就能全局生效的事，它分散在Canvas初始化、字体声明、viewport设置、甚至降级路径里。最容易被跳过的，是那个看似无关的ctx.scale(dpr, dpr)调用——少这一行，前面所有尺寸重设都白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
