iframe height: 100%无效因父容器无明确高度，可靠方案是padding-bottom百分比占位+position: absolute填满；需配viewport、postMessage通信及-webkit-overflow-scrolling优化。
iframe 宽度设为 100% 但高度不自适应？用 padding-bottom 模拟宽高比
直接写 width: 100%; height: 100% 在 iframe 上基本无效——父容器若无明确高度，height: 100% 会坍缩为 0。真正可靠的做法是用「padding-bottom 百分比」触发相对定位占位，再配合 position: absolute 把 iframe 填满该区域。
常见错误：给 iframe 加 height: 100vh，看似全屏，但实际会遮挡顶部状态栏或底部导航栏，且在 iOS Safari 中常因地址栏收放导致跳动。
- 父容器需设
position: relative - 子容器（用于占位）设
padding-bottom: 56.25%（16:9），或按需调整（如 4:3 是 75%，1:1 是 100%） - iframe 本身设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
border: none和allowfullscreen（尤其视频类内容）
移动端 viewport 和缩放限制必须配齐
即使 iframe 内容适配了，外层页面若没正确声明 viewport，iframe 里的页面仍可能被强制缩放、横向滚动。这不是 iframe 的问题，而是宿主页缺失基础响应式配置。
典型现象：手机上 iframe 显示一小块，左右可拖动，点击区域错位。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 在
<head>中确保有：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
user-scalable=no不是必须，但能避免双击放大后 iframe 内容错位；若需缩放，至少保留maximum-scale=1.0防止过度拉伸 - 不要依赖
target-densitydpi（已废弃，仅旧 Android 支持）
iframe 内容本身不响应？用 postMessage 主动同步尺寸
如果 iframe 加载的是第三方页面（比如 embed 的 YouTube 视频、微信公众号文章），你无法修改其 CSS，此时仅靠外层样式无法让它“跟着缩放”。必须让内页主动告知高度，并由外层动态调整 iframe 的 height。
前提：iframe 与父页同源，或目标页明确支持 window.parent.postMessage 回调。
- 外层监听：
window.addEventListener('message', e => { if (e.data.type === 'iframe-height') iframe.style.height = e.data.height + 'px'; }) - 内页在 DOM 加载完成后发消息：
window.parent.postMessage({ type: 'iframe-height', height: document.body.scrollHeight }, '*') - 注意：生产环境不应用
'*'，应指定event.origin校验来源 - 需防重复触发，建议加
setTimeout节流（DOM 可能重排）
iOS Safari 下 iframe 滚动卡顿、触摸失效？加 -webkit-overflow-scrolling
iFrame 自身内容超过高度时，在 iOS Safari 中默认滚动极不灵敏，甚至完全无法拖拽。这不是 bug，是 WebKit 对 iframe 内 overflow 的特殊限制。
解决方式不是改 iframe，而是改它的直接父容器（即那个 padding-bottom 占位的 wrapper）：
- 给 wrapper 加
overflow: auto; -webkit-overflow-scrolling: touch - 同时确保 wrapper 有明确高度（不能是
min-height或依赖内容撑开） - 若 iframe 内是表单或输入框，还需加
scrolling="no"属性防止双层滚动冲突
这个点最容易被忽略：开发者调通了宽度和高度自适应，却在真机测试时发现手指划不动内容，反复检查 iframe 样式也看不出问题——其实症结在外层 wrapper 缺少触控滚动支持。
