<iframe>尺寸控制首选width/height属性，兼容性最好；响应式应优先用CSS；需显式清除默认边框并注意Safari圆角bug；自适应高度依赖JS跨域限制大；移动端适配关键在viewport和max-width。
用 <iframe> 的 width 和 height 属性直接设尺寸
内嵌网页必须用 <iframe>，它的 width 和 height 是最基础、兼容性最好的控制方式。数值可以是像素（如 width="800"）或百分比（如 width="100%"），但注意：height="100%" 在父容器没明确高度时无效。
- 避免只写
width="100%"却不设height—— 默认高度仅约 150px，内容常被截断 - 若要响应式，优先用 CSS 控制，
width/height属性值别混用单位（比如width="100%" height="500px"容易在小屏上溢出） - 某些旧版 Safari 对
height="100%"支持不稳定，建议配合 CSS 的min-height补充兜底
用 CSS 的 border 和 border-radius 控制边框样式
<iframe> 默认带浏览器内置边框（尤其在 Firefox 中明显），必须显式用 CSS 清除或重定义。直接写 style="border: 1px solid #ccc;" 最快，但更推荐外联或 <style> 块统一管理。
-
border: none或border: 0都能去边框，但border: 0在部分 IE 下可能残留像素线，稳妥写法是border: none - 加圆角要用
border-radius，但注意：Safari 早期版本对iframe的border-radius有裁剪 bug，需额外加overflow: hidden到父容器 - 别依赖
frameborder="0"属性 —— HTML5 已废弃，Chrome 90+ 开始忽略它，纯靠 CSS
让 iframe 自适应内容高度（避开滚动条和空白）
固定 height 常导致内容撑出或留白。真想“随内容伸缩”，得靠 JS 监听子页面加载完成并读取其 document.body.scrollHeight，但跨域 iframe 无法访问该属性 —— 这是最大限制。
- 同域场景下，可在子页面 onload 后用
parent.postMessage主动发高度给父页，父页用window.addEventListener("message", ...)接收并设置iframe.style.height - 跨域时只能妥协：设一个合理
min-height+max-height，再配overflow-y: auto，比强行拉伸更可靠 - 别用
height: fit-content—— 多数浏览器对iframe不支持，实际无效
移动端适配常见失效点
在手机上 width="100%" 的 iframe 经常横向溢出，根本原因是 viewport 缩放和内部页面的 meta viewport 冲突。
立即学习“前端免费学习笔记（深入）”；
- 确保内嵌页面自身有正确
<meta name="viewport" content="width=device-width, initial-scale=1">，否则父页再调也白搭 - 父页 CSS 加一句
iframe { max-width: 100%; height: auto; }，防止大图或宽表格撑破容器 - iOS Safari 对
iframe的 touch 事件拦截较严，如果内嵌页有按钮点击无响应，试试加style="touch-action: manipulation;"
真正麻烦的从来不是怎么写样式，而是跨域限制和移动端 viewport 的隐式耦合 —— 这两点不提前验证，调半天 border 和 width 都白费。
