0

我基本上是在尝试将 iframe 嵌入到我的一个网站中。当我将 iframe 放在网站上时，它在移动设备上不起作用 - 这意味着响应性丢失并且无法根据需要进行缩放，请在此处查看

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

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

感谢任何帮助！

4

2 回答 2

1

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

纯 HTML 文件中的 iframe 是“响应式”是因为它只显示整个页面，因为没有设置视口。（在您的主网站中，这是视口：）<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>

于 2016-04-03T13:05:10.597 回答
-1

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

例子：

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

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

于 2020-08-07T09:20:43.737 回答