iframe 不会调整大小！和工作响应[关闭]答案

【问题标题】：Iframe doesn't resize! and work responsive [closed]iframe 不会调整大小！和工作响应[关闭]
【发布时间】：2016-04-03 11:46:45
【问题描述】：

我基本上是在尝试将 iframe 嵌入到我的一个网站中。当我将 iframe 放在网站上时，它在移动设备上不起作用 - 这意味着响应性丢失并且它不能根据请check here

进行缩放

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

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

感谢任何帮助！

【问题讨论】：

标签： css iframe mobile responsive

【解决方案1】：

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

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

那么你需要做什么：

移除 iframe 上设置的内联高度和宽度。
向您的 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>

【讨论】：

您好@Roy 感谢您的帮助，我确实尝试过.. 没有按我想要的方式显示。它被切断了，看起来我需要正确的视口。无论如何，你可以把它分解给我吗？非常感谢您的宝贵时间
@musclehustle 您需要根据需要更改padding-bottom。
是的，谢谢你我已经做到了，但我的意思是..它不完全适合内容..就像在普通的 html 页面中一样。我只看到 iframe 的左侧部分，因为内容无法缩放.. 有什么想法吗？非常感谢您再次光临
@musclehustle 那么 iframe 中的内容不是响应式构建的。那是你无法控制的事情。
hmmm.. 那么奇怪的是它如何适合上面的工作示例，我的意思是整个宽度在 iphone 上很容易缩小。无论如何，感谢您的尝试.. 我确定有一个解决方案:)

【解决方案2】：

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

例子：

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

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

【讨论】：

虽然这些链接很可能是 Magento 商店，但它们看起来非常垃圾。外部链接往往会过时，所以我删除了它们。仅在绝对必要时才使用示例站点链接。