用CSS aspect-ratio + width: 100%可实现iframe等比缩放，需浏览器支持（Chrome 88+等），不支持时用padding-bottom技巧fallback；iOS Safari中vh动态变化导致截断，应改用min/max-height组合；vertical-align默认baseline造成右侧空白，加vertical-align: top或display: block修复；sandbox禁用JS会使高度自适应失效，跨域时需预设高度。
用 CSS aspect-ratio + width: 100% 实现等比缩放
iframe 默认不响应式，直接写 width="100%" height="400" 会导致在小屏上高度固定、横向溢出。现代方案是放弃固定 height，改用 aspect-ratio 维持宽高比，再配合 width: 100% 自适应容器宽度。
关键点：浏览器必须支持 aspect-ratio（Chrome 88+、Firefox 89+、Safari 15.4+）。不支持时需 fallback。
- 推荐写法：
.responsive-iframe {<br> width: 100%;<br> aspect-ratio: 16 / 9;<br> border: none;<br>} - 不支持
aspect-ratio的旧浏览器，可用 padding-bottom 技巧（需外层包裹） - 避免同时设
height和aspect-ratio，后者会被忽略
移动端滚动时 iframe 内容被截断怎么办
常见现象：在 iOS Safari 或部分 Android 浏览器中，iframe 高度设为 100vh 后，地址栏收起/展开导致视口高度突变，内容被遮挡或留白。
根本原因是 vh 单位在 Safari 中会随地址栏动态变化，而 iframe 不自动重绘。不能依赖 JS 监听 resize —— 触发太晚或不触发。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 50vh+max-height: 70vh组合，给浏览器留出缓冲空间 - 禁用
scrolling="no"，改用overflow: auto在 iframe 内部滚动（需子页面配合） - 若子页面可控，在其
加margin: 0; height: 100%;，避免默认边距撑开
iframe 宽度 100% 但右侧有空白缝隙
这是 vertical-align 默认值 baseline 导致的行内元素对齐问题，尤其当 iframe 和文字/其他 inline 元素同级时，底部会多出几像素空白。
不是 margin 或 padding，也不是 box-sizing，纯属渲染行为。修复成本极低，但极易被忽略。
- 给 iframe 加
vertical-align: top或vertical-align: middle - 或者设
display: block（更彻底，但会脱离行内流） - 不要用
font-size: 0父容器 hack，影响可访问性
sandbox 属性开启后 iframe 高度自适应失效
当设置 sandbox="allow-scripts" 甚至空 sandbox 时，子页面 JS 可能被禁用，导致原本靠 postMessage 或 document.body.scrollHeight 获取高度的自适应逻辑完全失效。
这不是 bug，是 sandbox 的预期行为。跨域且启用 sandbox 时，“子页告诉父页我多高”这条路基本走不通。
- 若子页面同源，可不用 sandbox，或仅开必要权限：
sandbox="allow-scripts allow-same-origin" - 若必须 sandbox + 跨域，只能预设一个合理高度（如
min-height: 600px），或用 loading="lazy" 配合骨架屏过渡 - 切勿在 sandbox 下尝试注入 script 标签或 eval，现代浏览器会直接拦截
vh 动态变化 + aspect-ratio fallback 缺失的组合。这两个问题叠加时，连 DevTools 的 layout inspector 都可能显示错误尺寸——得靠真机反复滑动验证。 
