响应式 IFrame 显示来自外部文档的内容答案

【问题标题】：Responsive IFrame to display content from External Document响应式 IFrame 显示来自外部文档的内容
【发布时间】：2014-08-18 11:37:10
【问题描述】：

我有一个 iframe 来显示 .htm 文件的内容，该文件位于另一个位置。该文档在桌面浏览器上完美加载。

但是在移动版本上，文档的内容并没有完全显示出来。

我正在寻找适用于移动和桌面视图的响应式 iframe。

HTML

<iframe
    id="ifrm"
    src="URL.htm"
    width="100%"
    frameborder="0"
    scrolling="no"
    height="1450px"
    style="padding-top: 0px; float: left;" target="_blank"
/>

我参考了这些链接，但不幸的是它们没有帮助：

Full-screen iframe with a height of 100%

Scale iFrame css width 100% like an image

【问题讨论】：

目标页面也响应了吗？
是的。该页面是响应式的

标签： html css iframe twitter-bootstrap-3

【解决方案1】：

像这样试试LINK

HTML：

<div class="iframe">
    <iframe src="http://a.rgbimg.com/cache1wZTwK/users/m/mi/micromoth/600/oIejAt8.jpg" frameborder="0"></iframe>
</div>

CSS：

.iframe {
    position:relative;
}
iframe, object, embed {
    max-width: 100%;
    min-width: 100%;
}

【讨论】：

【解决方案2】：

Demo 在 iframe 中使用引导网站

确保你有

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

在您文档的<head> 中。

【讨论】：