iframe无禁止缩放属性，需分三类处理：禁用父页transform缩放、子页Canvas按DPR重设宽高并缩放绘图、父页监听document.documentElement手势事件拦截缩放。
iframe 本身没有“禁止缩放”的属性或开关，所谓“iframe 缩放”实际是三类独立问题混在一起：父页面用 transform: scale() 强行拉伸 iframe 元素、iframe 内部内容（如 Canvas、图片）在高 DPI 屏上模糊、用户在 iframe 上做双指/双击手势触发页面级缩放。必须分清场景，否则越改越糊。
别用 transform: scale() 缩放 iframe 元素
这是最常见也最致命的错误。给 <iframe> 标签加 transform: scale(1.5) 或 zoom: 150%，浏览器会把整个 iframe 渲染结果当位图拉伸，Canvas 变糊、SVG 锯齿、字体发虚，抗锯齿完全失效。
- 正确做法是：只通过 CSS 控制 iframe 的
width和height（比如用rem、vw或固定像素），让 iframe 内容自己适配 DPR - 若需动态缩放（如大屏投屏），改
src查询参数，例如iframe.src = 'page.html?scale=2'，让子页主动加载对应资源并重设根字号 - 绝对不要对 iframe 元素本身做任何
transform、zoom或scale()操作
iframe 内部 Canvas 模糊必须在子页里修复
父页面改 window.devicePixelRatio 对 iframe 内部毫无影响——iframe 有独立的 window 对象，且其 devicePixelRatio 值可能和父页不同（尤其 iOS Safari）。Canvas 模糊不是 iframe 的锅，是子页没做 DPR 适配。
- 在 iframe 页面内部 JS 中执行三步闭环：
canvas.width和canvas.height设为Math.round(visualWidth * window.devicePixelRatio)（visualWidth来自getBoundingClientRect().width，不能用offsetWidth） - 调用
ctx.scale(dpr, dpr)，否则绘图坐标全乱 -
canvas.style.width和canvas.style.height必须显式设为 CSS 像素值（如'400px'），否则浏览器按物理像素撑开布局
防止用户在 iframe 上双击/双指缩放页面
iframe 不是缩放隔离区。用户在 iframe 区域内双击或双指捏合，触发的是整个页面的缩放行为，和 iframe 内容是否跨域无关。要拦截，必须在父页面监听 document.documentElement 上的手势事件。
立即学习“前端免费学习笔记（深入）”；
- 监听
gesturestart（iOS Safari 特有）：document.documentElement.addEventListener('gesturestart', e => e.preventDefault(), { passive: false }) - 监听
touchstart并拦截多点：if (e.touches.length > 1) e.preventDefault() - 防双击：缓存
touchend时间戳，两次间隔 ≤ 300ms 就e.preventDefault()，绑定到document.documentElement，不是body - 所有监听器必须带
{ passive: false }，否则preventDefault()在 Chrome/Safari/Edge 中被静默忽略
真正难处理的不是代码怎么写，而是 iframe 内外 DPR 同步和事件捕获范围——父页改了根字号但没通知 iframe，或监听器绑在 body 而 DOM 还没就绪，都会导致某次横屏后突然模糊或缩放失效。这些细节不报错，但一上线就出问题。
