iframe本身不继承父页面字号，也无法css直接缩放内容；“字号适配”需结合容器尺寸控制、子页面自身响应式设计及必要时postmessage协调状态。
iframe 本身不继承父页面的字号，也无法通过 CSS 直接缩放整个嵌入页面的内容；所谓“字号适配”，本质是控制 iframe 渲染区域尺寸 + 子页面自身响应式设计 + 必要时用 postMessage 协调缩放状态。
iframe 的 width/height 设置直接影响内容可见区域，但不改变子页面内部字号
很多人误以为给 iframe 加 transform: scale(0.8) 就能统一缩放子页面文字和布局——这会导致子页面内所有像素单位（如 16px、2rem）被强制拉伸或压缩，触发模糊、错位、点击偏移等问题，且移动端 touch 事件坐标会失准。
真正可控的是 iframe 容器尺寸与子页面自身的响应逻辑：
- 父页面中显式设置
iframe的width和height，推荐用百分比 +aspect-ratio配合max-width控制响应式行为 - 子页面必须自己实现响应式：用
rem或em基于根字体大小调整，或监听window.innerWidth动态修改document.documentElement.style.fontSize - 若子页面由你完全控制，可在其
中加入<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iframe 内部默认无 viewport，会以桌面模式渲染
跨域 iframe 无法读取或修改子页面字号，只能靠 postMessage 协商
当 iframe.src 指向不同源（协议、域名、端口任一不同）时，父页面 JavaScript 访问 iframe.contentDocument 会直接抛出 DOMException: Blocked a frame from accessing a cross-origin frame。此时想动态调整子页面字号，必须双方配合使用 postMessage。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操要点：
- 父页面发送消息：
iframe.contentWindow.postMessage({ type: 'SET_FONT_SIZE', value: '14px' }, 'https://embedded.example.com') - 子页面监听：
window.addEventListener('message', e => { if (e.origin === 'https://parent.example.com' && e.data.type === 'SET_FONT_SIZE') document.documentElement.style.fontSize = e.data.value }) - 务必校验
e.origin，避免 XSS 风险；不要用*通配 - 子页面需提前定义好字号变更的生效逻辑（例如通过 CSS 自定义属性或 class 切换）
移动端 iframe 滚动卡顿、缩放失效的常见原因
iFrame 在 iOS Safari 和部分 Android 浏览器中，默认禁止双指缩放，且滚动行为常被父容器截断。这不是 bug，而是浏览器对嵌套滚动上下文的主动限制。
关键修复点：
- 给
iframe父容器加style="overflow: auto; -webkit-overflow-scrolling: touch;"，否则 iOS 下无法滑动 - 子页面必须有明确的
<meta name="viewport">，且不能含user-scalable=no，否则即使父容器允许缩放，iframe 内部也锁死 - 避免在父页面对
iframe使用transform: scale()或zoom，这些属性在移动端兼容性差，且会禁用原生滚动加速 - 若需整体缩小展示（如仪表盘缩略视图），建议用
iframe的width/height缩小容器，再让子页面用 CSS@media主动适配窄屏
最易被忽略的一点：iframe 的缩放问题从来不是单点样式问题，而是父子页面两个独立渲染上下文之间的协调问题。你控制不了子页面的 JS 执行时机、CSS 加载顺序、甚至它是否启用了 font-display: swap —— 所有这些都会影响最终呈现的“字号观感”。真要强一致，就别嵌第三方页；若必须嵌，就接受它是个黑盒，只管好自己的容器尺寸和通信边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
