iframe 不调整大小！和工作响应

Question

我基本上是在尝试将 iframe 嵌入我的网站之一。当我将 iframe 放在网站上时，它无法在移动设备上运行 - 这意味着响应能力会丢失并且无法缩放 check here

但是，当我将相同的 iframe 放在 PLAIN HTML 文件中时，它完全响应。 check here

你能告诉我这里有什么问题吗？我在想一些 CSS 冲突？

感谢任何帮助！

Answer 1

当我访问您的网站时，iframe 没有响应，因为 iframe 的宽度和高度设置为 inline。您需要通过 CSS 设置（或更改它们）以使其响应。

普通 HTML 文件中的 iframe 是 'responsive' 是因为它只显示整个页面，因为没有设置视口。 （在您的主网站中，这是视口：<meta name="viewport" content="width=device-width, initial-scale=1">）。感觉反应灵敏，但不是。

那么你需要做什么：

1. 删除在 iframe 上设置的内联高度和宽度。
2. 将代码添加到您的 CSS 以使 iframe 响应。有关如何执行此操作的信息，请参见下面的小示例。试用它以满足您的需求（和视口）。

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  background: lightgrey;
}

.iframe-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid red;
}

<div class="iframe-container">
     <iframe src="http://spreadshirt.com/"></iframe>
</div>          

Answer 2

只需在您的 iframe 中的 pdf URL 之后添加 #view=FitH。

示例：

<div class="iframe-container">
  <iframe src="http://example.com#view=FitH"></iframe>
</div>

然后使用 Roy 提到的上述 CSS。它将根据响应式屏幕适合 pdf。