移动端 iframe 无法用 padding-bottom 百分比实现内容高度自适应，因其基于父容器宽度计算固定比例，与子页面实际内容高度无关；真正可靠方案是 js 动态获取子页 scrollheight 并设置 iframe 高度，同源监听 onload，跨域通过 postmessage 通信并严格校验 origin。
移动端 iframe 用 padding-bottom 百分比占位为什么不行
它根本不能让 iframe 高度「跟随内容」——padding-bottom 是基于父容器宽度的固定比例值，和子页面实际内容高度毫无关系。你设 padding-bottom: 56.25%（16:9），只是在父盒子里撑出一个固定高宽比的空白区，iframe 本身仍会按默认 150px 或 CSS 设置的 height 渲染，内容溢出照样滚动，或底部留白。
padding-bottom + position: absolute 组合只适用于静态高度场景
这种写法常见于视频嵌入、固定比例图表等已知尺寸的内容，比如：
div.iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
但它有明确前提：
- 子页面内容高度必须是静态、可预估的（比如一张图、一段定高文字）
- 不能有动态加载、折叠展开、输入框唤起键盘等导致高度变化的行为
- 移动端软键盘弹出会压缩 viewport 高度，
padding-bottom不会重算，必然错位
真正适配内容高度，必须靠 JavaScript 动态读取
移动端 iframe 自适应只有一条可靠路径：用 JS 获取子页面真实内容高度，并设给 iframe 的 style.height。但必须区分两种情况：
同源时（src 和父页协议/域名/端口一致）：
- 监听
iframe.onload，再读iframe.contentDocument.body.scrollHeight - 加
Math.max(scrollHeight, 300)防止空内容塌陷 - 子页
body要重置margin: 0; padding: 0;，否则 scrollHeight 多出默认边距
跨域时（比如嵌第三方活动页）：
- 子页用
window.parent.postMessage({ type: 'iframeHeight', height: document.body.scrollHeight }, 'https://yourdomain.com') - 父页监听
message，严格校验event.origin === 'https://yourdomain.com' - 收到后设
iframe.style.height = data.height + 'px'
移动端特别注意软键盘和 resize 事件失效问题
iOS Safari 和部分安卓 WebView 中，软键盘弹出会触发 resize，但不会触发 iframe 内容重排；用户收起键盘后，scrollHeight 可能没更新。此时不能只依赖 onload：
- 子页在
DOMContentLoaded后发一次高度，再监听input、focus等事件，在关键交互后主动重发 - 父页收到消息后，用
requestAnimationFrame延迟设置高度，避开渲染抖动 - 避免用
setInterval轮询——耗电、卡顿、iOS 后台标签页会暂停执行
最易被忽略的是：子页发消息时没等 DOM 完全就绪，scrollHeight 拿到的是 0；或者父页没清空旧定时器，多个 iframe 共存时互相干扰。这些细节一漏，整个自适应就断在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
