canvas在iframe中模糊须在iframe内闭环完成dpr适配：设canvas.width/height为math.round(visualwidth×dpr)，ctx.scale(dpr,dpr)，canvas.style宽高设css像素值。
iframe 内部 Canvas 模糊必须在 iframe 里重设宽高和 ctx.scale()
Canvas 在 iframe 中模糊，不是 iframe 标签的问题，而是 iframe 内部的 canvas 元素没做 DPR 适配。父页改 devicePixelRatio 对它完全无效——iframe 有自己的 window 对象，且 window.devicePixelRatio 值可能和父页不同（尤其 iOS Safari）。
必须在 iframe 页面内执行以下三步，缺一不可：
-
canvas.width和canvas.height要设为Math.round(visualWidth * window.devicePixelRatio)，其中visualWidth来自canvas.parentElement.getBoundingClientRect().width（不能用offsetWidth，它不响应缩放） - 调用
ctx.scale(dpr, dpr)，否则所有绘图坐标会偏移或挤成一团 -
canvas.style.width和canvas.style.height必须显式设为 CSS 像素值（如'400px'），否则浏览器按物理像素撑开布局
别用 transform: scale() 缩放整个 iframe 元素
给 <iframe></iframe> 加 transform: scale(1.5) 或 zoom: 150% 是最常见也最危险的操作：它把 iframe 内容当位图拉伸，Canvas、SVG、字体全部变糊，抗锯齿完全失效。
正确做法是让 iframe 源页自己适配 DPR，然后只通过 CSS 控制 iframe 的 width/height（比如用 rem 或 vw），而不是靠 transform 缩放容器本身。
若真需动态缩放（如大屏投屏）：
- 优先用 JS 修改 iframe 的
src查询参数，例如?scale=2，让子页主动加载对应 DPR 的资源并重设根字号 - 禁用
transform后，再检查子页是否监听了matchMedia('(resolution)')—— iOS 旋转屏幕时resize不触发，但 DPR 可能已变
跨域 iframe 抗锯齿根本不可控，同域可注入脚本干预
<iframe></iframe> 标签没有 antialias 属性，也没有任何 CSS 属性能直接开启它的抗锯齿。所谓“模糊”，本质是内部内容（Canvas/WebGL/CSS）的渲染问题，而 iframe 本身只是容器。
你给 <iframe></iframe> 加 image-rendering: crisp-edges 完全无效，因为 iframe 不是图像，也没有绘图上下文。
可行路径只有两条：
-
同域：可用
iframe.contentWindow.document注入脚本，修改内部canvas的ctx.imageSmoothingEnabled = false或调整 WebGLantialias: true初始化参数 - 跨域：完全不可控。CORS 和 sandbox 机制阻止一切 DOM 访问与脚本注入，此时唯一能做的，是确保子页自身完成完整 DPR 适配
父页和 iframe 的 DPR 不同步会导致定位偏移
即使 iframe 页面做了完整 DPR 适配，如果父页用了 rem 动态根字号但没同步传值，iframe 内部用 getBoundingClientRect() 获取的坐标，和父页视觉位置就可能对不上。横竖屏切换后尤其明显。
这不是 bug，是两个独立文档的渲染上下文未对齐：
- 父页可通过
window.postMessage({ type: 'dpi-sync', dpr: window.devicePixelRatio })主动通知 iframe - iframe 内需监听
message，收到后立即执行document.documentElement.style.fontSize = (16 * dpr) + 'px'等适配逻辑 - 注意：不要依赖 postMessage 同步
devicePixelRatio值来驱动 canvas 重绘——iframe 内可直接读window.devicePixelRatio，且更准确
关键点在于：DPR 适配必须在 iframe 内部闭环完成，不能指望父页代劳；而父子通信只用于协调布局级行为（如字体、定位），不用于替代 canvas 渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
