iframe设width="100%"出现横向滚动条，如何适配屏幕宽度？

1. 排查嵌入页面的响应式设置 #

横向滚动条大多是因为嵌入的目标页面本身没做响应式适配——比如页面里有固定宽度的元素（width: 1200px这类硬编码值），或者没加viewport元标签。如果能修改目标页面的代码，先加上：

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

同时把页面内的宽高属性改成相对单位（比如width: 100%），避免元素超出容器宽度。

2. 清除页面及iframe容器的默认边距 #

浏览器默认会给html、body标签加margin或padding，这会让iframe实际占用的宽度超出屏幕。给页面和iframe的父容器加以下样式：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.iframe-wrap {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  position: relative;
}

然后把iframe放到这个容器里，调整iframe的样式：

<iframe id="inlineFrameExample" title="Inline Frame Example" frameborder="0" 
  src="https://www.bla-bla.de/folder/subfolder/application/" 
  class="no-print" 
  style="position:absolute; top:0; left:0; width:100%; height:100%; border:none; overflow:hidden;">
</iframe>

3. 强制隐藏横向滚动并锁定宽度 #

给iframe添加scrolling="no"属性（虽然HTML5标记为弃用，但主流浏览器仍支持），同时用box-sizing: border-box确保边框、内边距不会额外增加宽度：

<iframe id="inlineFrameExample" title="Inline Frame Example" frameborder="0" 
  src="https://www.bla-bla.de/folder/subfolder/application/" 
  scrolling="no"
  class="no-print" 
  style="position:absolute; top:0; left:0; width:100vw; height:100%; box-sizing:border-box; border:none; overflow-x:hidden;">
</iframe>

这里用100vw代替100%，确保iframe宽度严格等于当前视口宽度，规避父容器可能存在的边距影响。

4. 应急方案：用CSS缩放适配 #

如果完全无法修改目标页面的内容，只能用缩放来强行适配。比如调整缩放比例让内容刚好塞进屏幕：

#inlineFrameExample {
  transform: scale(0.95);
  transform-origin: top left;
  width: 105.26vw; /* 1/0.95 ≈ 1.0526，抵消缩放后的宽度收缩 */
  height: 105.26vh;
  overflow: hidden;
}

注意这个方法会让内容变小，仅作为临时解决方案使用。

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