禁用Bootstrap 3响应并将页面加载到iframe

Question

我想禁用Boostrap 3.0响应，然后在iframe中加载页面（发票模板）。

我的iFrame HTML / CSS是：

<div class="row">
    <div class="col-xs-12">
        <iframe id="frame" src="http://my.app/template/one/pdf/html" frameborder="0" scrolling="no"></iframe>
    </div>
</div>

#frame {
  max-width: 1190px;    // A4 page dimension ratio
  min-height: 1684px;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

我关注了instructions here，并且能够在iPhone 5模式下将页面加载到Chrome时停用响应功能。

如果我从页面头部省略了viewport语句，它会稍微加载屏幕，如下所示：

如果我添加一个视口语句（并使其宽950），它将完全加载如下：

<meta content="width=950" name="viewport">

当我把它放在我的iframe中时，它就像这样响应：

我可以在iframe的页面头中看到CSS文件是无响应的boostrap版本。

我的问题是：

iframe CSS是否被父页面的CSS覆盖。我希望不，所以为什么你认为模板没有在桌面模式下加载iFrame？

为什么在没有每个引导程序指令的元标记的情况下它不适合视口？

什么可能导致页面底部的文字无法与页面的其余部分一起缩放？

Answer 1

<iframe>是独立的 - 它使用它自己的html结构，因此它有自己的样式。

如果不了解“发票”页面的内容，就无法回复您的问题。