正确做法是用响应式容器包裹iframe，通过padding-bottom配合绝对定位实现等比缩放，而非设置iframe自身height="100%"；需确保HTTPS、referrerpolicy="no-referrer"，并使用平台官方嵌入代码。
直接用 <iframe></iframe> 标签设 height="100%" 是无效的，因为浏览器无法从空高度的父容器推算百分比值。真正能自适应高度的关键，在于用 CSS 控制容器比例 + 绝对定位 iframe 填满，而不是靠 iframe 自身宽高属性。
必须用响应式容器包裹 iframe
iframe 本身不支持流式缩放或宽高比锁定，硬写 width="100%" height="400" 在手机上必然溢出或出现双滚动条。正确做法是：用一个外层 <div> 承载 iframe，并通过 padding-bottom 配合绝对定位实现等比缩放（如 16:9 或 4:3）。<pre class='brush:html;toolbar:false;'><div class="embed-container">
<iframe
src="https://www.google.com/maps/embed?pb=..."
loading="lazy"
referrerpolicy="no-referrer"
allowfullscreen>
</iframe>
</div></pre><p>对应 CSS：</p><pre class='brush:css;toolbar:false;'>.embed-container {
position: relative;
width: 100%;
padding-bottom: 75%; /* 16:9 = 9/16 ≈ 56.25%，4:3 = 75% */
overflow: hidden;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}</pre><h3>不要塞进表格单元格里</h3>
<p>把 iframe 直接放进 <code><td> 会导致高度坍缩、白屏或只显示左上角一小块。表格布局不识别 <code>height="100%"，也没有流式内容高度概念。即使加了 table-layout: fixed，也难保各端一致渲染。建议改用 Flex 或 Grid 模拟表格结构：
立即学习“前端免费学习笔记（深入）”；
<div class="contact-layout">
<div class="address">北京市朝阳区建国路8号</div>
<div class="embed-container">
<iframe src="..."></iframe>
</div>
</div>.contact-layout {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.contact-layout .address {
flex: 1 1 300px;
}
.contact-layout .embed-container {
flex: 1 1 400px;
}确保 HTTPS 和 referrerpolicy
所有地图或视频服务（Google、百度、高德、B站、YouTube）都强制要求全站 HTTPS，且 iframe 必须带 referrerpolicy="no-referrer"。漏掉这个属性，Safari 和新版 Chrome 会直接拦截并报 403 错误。同时禁止混用 HTTP 资源，否则整个 iframe 白屏。
- ✅ 正确：
<iframe src="https://..." referrerpolicy="no-referrer"></iframe> - ❌ 错误：
src="http://..."或完全没写referrerpolicy
官方嵌入代码不能手改
必须从地图平台「分享 → 嵌入地图」按钮复制完整 <iframe></iframe> 代码，不能手动拼 URL。例如：
- Google 地图必须含
/embed?pb=，不能用/maps/place/； - 百度地图必须含
output=html参数，否则返回Refused to display； - 高德地图必须用
https://www.amap.com/embed?开头的链接，不能用分享页短链。
手改坐标、中文地址未编码（如没用 encodeURIComponent()）、删参数、换域名，都会导致定位偏移、400 错误或跳转首页。
不复杂但容易忽略
