iframe的width/height属性不写单位默认为像素，合法有效；百分比必须带%符号，不支持vw/vh等CSS单位。
iframe 的 width 和 height 属性到底要不要加单位
HTML 规范里，width 和 height 是 iframe 的原生属性，它们的值默认就是像素（px），**不写单位是合法且有效的**。比如 width="800" 就等于 width="800px"；但 width="100%" 这种百分比写法必须带 % 符号，否则浏览器会当数值处理并忽略。
常见错误：写成 width="100" 想表达“占满父容器”，结果只是 100 像素宽——因为没写 %，浏览器不会自动转义。
-
width="600"→ 600px（固定宽度） -
width="100%"→ 相对于父容器宽度（响应式） -
width="50vw"→ 无效！width属性不支持 vw/vh/rem 等 CSS 单位，只能用 px 或 % - 想用
vw/vh？必须改用style="width: 50vw;"
为什么设了父容器尺寸，iframe 还是 300×150
iframe 有默认尺寸：300px 宽 × 150px 高。这个默认值不会被父容器的 width/height CSS 覆盖，除非你显式设置 iframe 自身的尺寸。
典型翻车现场：<div style="width:800px; height:600px"><iframe src="..."></iframe></div> —— 父 div 尺寸再准，iframe 仍按 300×150 渲染，可能被拉伸、裁剪或留白。
- ✅ 正确做法：直接在
<iframe>标签上写width和height属性，或用style设置 - ⚠️ 注意：如果用了
display: flex或display: grid布局父容器，iframe 默认是 inline 元素，底部会有几像素空白（基线对齐导致），加display: block可消除 - ❌ 不要依赖父容器的
heightCSS 让 iframe 百分比自适应高度：height="100%"在 iframe 上几乎总失效，除非整个祖先链都设了明确高度（极难维护）
响应式 iframe 的两种可靠写法
要让 iframe 随屏幕或容器缩放，别只靠 width="100%" —— 高度必须配合处理，否则内容会被压扁或截断。
场景一：固定宽高比（如 YouTube 视频）
<div class="aspect-16by9"> <iframe src="..." width="100%" height="100%" style="border: none; display: block;"></iframe> </div>
对应 CSS：
.aspect-16by9 {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
position: relative;
}
.aspect-16by9 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}场景二：纯流体宽度 + 固定高度（适合表单、地图等）
-
width="100%"+height="400"最简可靠 - 若需适配小屏，可用
height="40vh"配合style（注意：不能写在height属性里）→style="height: 40vh;" - 避免
min-height和max-height混用，iframe 不会自动撑开父容器高度
border、scrolling 和 title 不是可选项
这些属性看着可有可无，但漏掉会影响可用性和合规性。
-
border="0"已废弃，统一用style="border: none;" -
scrolling="no"同样废弃，现代写法是style="overflow: hidden;"，但慎用——可能把内容截断且无法滚动 -
title属性必须填，例如title="公司联系方式表单"，这是 WCAG 2.1 AA 级可访问性要求，屏幕阅读器靠它识别 iframe 用途 - 缺少
title可能在 Lighthouse 审计中被标为「低可访问性」
最易被忽略的是：iframe 内容加载失败时，用户看不到任何提示。建议加一层 fallback 文字（用 <iframe>...</iframe> 标签内文字），虽然多数浏览器不渲染，但语义上更完整。
