如何让嵌入第三方iframe的网站内容适配移动设备？

1. 精准设置iframe尺寸参数 #

直接给iframe设置匹配移动设备视口的尺寸，比如针对主流手机的固定尺寸：

<iframe width="375" height="667" src="你的自有网站地址"></iframe>

如果需要适配不同设备的父容器空间，用相对单位设置iframe宽高，让它占满对应区域：

<iframe width="100vw" height="100vh" src="你的自有网站地址"></iframe>

配合你已添加的viewport标签，自有网站内容会自动适配iframe的尺寸。

2. 在自有网站添加响应式样式兜底 #

在自有网站的CSS里补充响应式规则，确保内容在不同宽度下正常展示：

/* 基础重置，避免布局错乱 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 适配移动设备宽度的样式调整 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .page-container {
    padding: 0 15px;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  /* 根据你网站的实际元素补充适配规则 */
}

这样不管iframe的实际宽度如何，自有网站内容都会根据容器宽度自动调整。

3. 优化viewport标签参数 #

在现有viewport标签上补充参数，强化适配效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

添加maximum-scale=1.0和user-scalable=no可以防止用户在iframe内缩放页面，保证内容始终以适配尺寸展示。

4. 设置自有网站最小宽度兜底 #

如果第三方页面的iframe可能被拉得过小，给自有网站的根容器设置最小宽度，避免内容错乱：

body {
  min-width: 320px; /* 适配主流移动设备的最小宽度 */
}

内容的提问来源于stack exchange，提问作者user14360885