正确做法是用响应式容器包裹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 白屏。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
<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 错误或跳转首页。
不复杂但容易忽略
