响应式全屏iframe无法触发内嵌页移动端适配问题咨询

iframe内部页面的移动端响应式未生效，和你写的iframe宽高CSS无关，核心遗漏是承载iframe的父页面未配置标准移动端视口（viewport）元标签。
移动端浏览器中，iframe的渲染视口规则完全继承自父页面：如果父页面没有声明视口规则，浏览器会默认按980px左右的桌面端宽度渲染页面，iframe内部的页面拿到的视口宽度就是这个桌面端宽度，自然无法触发自身的移动端断点样式。而你单独打开源页面时，源页面自身的viewport配置生效，所以响应式正常。

• 在父页面的<head>标签最开头添加标准视口元标签，这是所有移动端响应式生效的必要前提：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果你的业务不需要用户手动缩放页面，可以补充配置禁止缩放：content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

• 优化现有样式，消除边框、边距缝隙，避免双滚动条，实现和原生页面一致的视觉效果：

/* 全局重置，消除默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 隐藏父页面默认滚动条，避免双层滚动条 */
}
iframe {
  width: 100%;
  height: 100%;
  border: 0; /* 替代frameborder属性，兼容现代浏览器 */
  display: block; /* 消除iframe默认行内元素带来的底部缝隙 */
}

对应的iframe标签简化为：

<iframe src="https://alumsharif.org/people/alireza.ghaderi" allowfullscreen></iframe>

如果要实现用户完全无法区分iframe内容和原生主页面的效果，还需要补充以下配置：

• 同域场景下（当前你的父页面和iframe源站同域），可以添加JS自动适配iframe高度，避免内容截断或留白：

const profileIframe = document.querySelector('iframe');
profileIframe.onload = () => {
  const iframeDoc = profileIframe.contentWindow.document;
  profileIframe.style.height = `${iframeDoc.documentElement.scrollHeight}px`;
}

• 统一父页面和iframe页面的背景色、默认字体样式，避免iframe加载前出现样式跳变
• 给iframe添加referrerpolicy="no-referrer-when-downgrade"配置，保证源页面的统计、权限逻辑正常运行，不会因为跨iframe嵌入出现功能异常

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