Canvas移动端模糊的根本原因是物理像素与CSS像素不匹配，必须通过JavaScript动态设置canvas.width/height为CSS尺寸乘以devicePixelRatio，并调用ctx.scale(dpr,dpr)，仅靠CSS设置width/height属性会导致低分辨率缓冲区被拉伸而加剧模糊。
Canvas画布在移动端模糊，单靠CSS无法真正解决——因为模糊根源是物理像素与CSS像素不匹配，而CSS只能控制显示尺寸，不能提升画布缓冲区分辨率。必须配合JavaScript重设canvas.width/canvas.height并调用ctx.scale()，CSS只起“缩回显示尺寸”的配合作用。
为什么只改CSS width/height属性会越调越糊
常见错误是直接在CSS里写canvas { width: 100%; height: 500px; }，或用JS设置canvas.style.width = "375px"，却不碰canvas.width这个DOM属性。此时画布缓冲区仍是默认的300×150（或上次遗留值），浏览器被迫把低分辨率内容拉伸填充到CSS指定大小，插值放大必然模糊。
- 现象：文字毛边、细线发灰、图标边缘有半透明过渡
- 本质：
canvas.width/canvas.height决定缓冲区物理像素数，style.width/style.height仅控制CSS像素下的显示框大小 - 关键点：二者比例必须等于
window.devicePixelRatio，否则必糊
CSS必须做的三件事（且仅这三件）
CSS在这里不是主角，但四个动作缺一不可：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 用
width/height固定视觉尺寸，例如canvas { width: 100vw; height: 100vh; }，确保布局行为可控 - 加
image-rendering: pixelated;（可选），对drawImage()缩放图像时禁用插值，避免二次模糊 - 禁用
transform: scale()做整体缩放——它会触发浏览器插值，和DPR适配逻辑冲突 - 避免
max-width或flex自动收缩导致getBoundingClientRect()读取值失真；若必须响应式，每次resize后需重新读取CSS尺寸再计算
容易被忽略的CSS陷阱：viewport与initial-scale
即使JS+CSS适配全对，页面仍模糊？大概率是meta viewport配置破坏了DPR感知：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1">是基础，但若写了maximum-scale=1或user-scalable=no，iOS Safari可能冻结DPR值，切到横屏或地址栏收起时不再更新 - 部分安卓WebView在
initial-scale非1时，devicePixelRatio返回值异常（如恒为1），应优先用window.matchMedia监听(min-resolution)变化而非依赖resize - 绝对不要用
viewport强制缩放画布容器——那是在画布外层再套一层模糊
最危险的错觉是“看起来差不多清晰”，尤其在DPR=2设备上；一旦用户切到DPR=3的iPhone 15 Pro或折叠屏安卓机，未做Math.round(width * dpr)取整的画布会因小数宽高被截断1物理像素，导致右侧/底部永久丢线。DPR适配不是锦上添花，是高清屏上的生存底线。
