如何为 iPad 设置 iframe？

【问题标题】：How to setup iframe for iPad?如何为 iPad 设置 iframe？
【发布时间】：2014-10-15 23:48:00
【问题描述】：

我对 iPad 中的 iframe 问题有疑问。我正在使用 Bootstrap 模态在模态中嵌入 iframe。在所有桌面浏览器上，一切看起来都很棒。但是，iframe 中的内容在 iPad 纵向模式下过度扩展。我不确定这是否是引导程序问题。请查看JSFiddle。

<body>
    <h1>Test</h1>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#test">
        Click to open modal
    </button>

    <div class="modal fade" id="test">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">title</h4>
                </div>
                <div class="modal-body">
                    <iframe id="iframe1" style="height:600px; width:100%;" src="http://www.cnn.com"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

Media queries?

标签： javascript css twitter-bootstrap iframe modal-dialog

【解决方案1】：

在 Bootstrap 中使用响应式嵌入组件。

http://getbootstrap.com/components/#responsive-embed

演示：http://jsbin.com/tesuye/1/edit

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="http://www.cnn.com"></iframe>
</div>

这是用于选择纵横比（16by9 或 4by3）的 CSS。您可以使用此格式制作其他纵横比（不要更改这些）：

.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

你自己的：

.embed-responsive.embed-responsive-myAspectRatio {
  padding-bottom: 40%;
}

【讨论】：