根本原因是iframe内部未适配自身window.devicepixelratio，导致canvas、图片等资源在高dpi屏上被强制拉伸模糊；父页面css缩放或image-rendering设置不当会加剧失真。
iframe内页面在高DPI屏上发虚，根本原因不是缩放而是DPR错配
iframe本身不“模糊”，但它的渲染上下文和父页面可能使用不同的window.devicePixelRatio值——尤其当iframe加载的是独立域名资源、或未显式声明DPI感知时。浏览器会按父页面的CSS像素渲染iframe容器，但iframe内部若按1x逻辑绘制（比如Canvas未适配、background-image没提供2x图），就会被强制拉伸，出现锯齿或发虚。常见于嵌入第三方编辑器、统计图表或旧版CMS后台。
确保iframe容器不被CSS缩放意外拉伸
很多模糊来自父页面对iframe做了transform: scale()或设置了zoom，这会让整个iframe渲染缓冲区被重采样一次，叠加DPR缩放后失真加剧。必须避免：
- 不要用
transform: scale(0.75)模拟缩小——改用width/height配合font-size等比缩放 - 检查父级CSS是否设置了
image-rendering: auto（默认值），建议显式设为image-rendering: crisp-edges仅作用于iframe外层容器 - iframe标签自身不要设
width或height为百分比+固定max-width，容易触发非整数CSS像素尺寸，诱发亚像素渲染抖动
iframe内部必须主动适配DPR，不能依赖父页传导
iframe是独立执行环境，window.devicePixelRatio值由其自身加载时机和宿主策略决定，不会自动继承父页。如果内部有Canvas、自定义光标或SVG图标，需自行处理：
- Canvas初始化时读取自身的
window.devicePixelRatio，而非父页的——parent.window.devicePixelRatio在跨域下不可访问，且即使同域也不保证同步 - SVG图标要加
shape-rendering="crispEdges"和text-rendering="geometricPrecision"，并移除width/height属性，只保留viewBox - 监听
matchMedia('(resolution)')而非resize事件，因为窗口拖到另一台显示器时DPR可能突变，但resize不触发 - 背景图用
background-size: cover时，确保图片原始分辨率≥容器物理像素宽×高，否则image-rendering: pixelated只会放大锯齿，不提升细节
跨域iframe无法注入脚本？用CSS隔离+资源预判补救
当iframe来自不同源（如嵌入SaaS仪表盘），JS无法访问其DOM，只能从父页侧干预：
- 给iframe外层包裹一个
div，设overflow: hidden+ 固定width/height（用getBoundingClientRect()获取精确CSS像素值），避免浏览器按视口比例动态计算导致DPR错位 - 用
iframe { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }强制插值方式，对Chrome/Safari生效；Firefox需额外加-moz-crisp-edges - 若知道目标iframe常用DPR（如多数企业后台默认适配2x），可在父页预加载对应尺寸的占位图作为背景，用
background-image覆盖iframe空白期，规避初始模糊帧
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
