如何为 iframe 设置自定义视口？答案

【问题标题】：How do I set a custom viewport for an iframe?如何为 iframe 设置自定义视口？
【发布时间】：2014-05-18 15:42:05
【问题描述】：

好的。实际上，也许标题没有意义。

请阅读：

我想创建一个具有自定义宽度的 iframe。好的。请尝试理解。

我不希望 iframe 是响应式的（嵌入在 iframe 中的网站是响应式的），我希望它看起来像一张缩小的图片。

如果你愿意，我可以给你一些例子。知道怎么做吗？

【问题讨论】：

如果宽度属性对你不起作用，你能提供例子吗？
我认为 OP 的建议是加载到 iframe 中的站点/页面需要缩小以适合可用的 iframe 窗口。或者换句话说，设置页面的视口。但是，据我所知，仅使用 html 是不可能的，因为视口是在原始页面本身中声明的，而不是在外部声明的。可能有一些 JQuery 插件，但我不知道有任何此类选项。

【解决方案1】：

您可以使用 css 转换来缩放 iframe。例如，如果您想让 iframe 中的页面以一半大小显示..

iframe {
  transform: scale(0.5, 0.5);
  height: 1000px;
  width: 1000px;
}

<iframe src='http://www.google.com'></iframe>

这应该显示一个 1000x1000 的页面视口缩小到一个 500x500 的 iframe。

【讨论】：

【解决方案2】：

如果您已经尝试过 width 属性但不起作用，请尝试使用 CSS 的 max-width 属性。

例子，

index.html

<iframe src="http://www.google.com/" class="if"></iframe>

style.css

.if { max-width: 100px; }

【讨论】：

如果您发现我的或 Omar 的答案有帮助，您至少可以接受它作为最佳答案。
您好，很抱歉回复延迟。实际上我的问题是我想在 500px 的容器中显示 100% 的 iframe 宽度而不滚动，并且宽度仍应为 100%（尽管窗口会显得小得多）