我对 iPad 中的 iframe 问题有疑问。 我正在使用 Bootstrap 模态在模态中嵌入一个 iframe。所有桌面浏览器上的一切看起来都很棒。但是，iframe 中的内容在 iPad 纵向模式下过度扩展。我不确定这是否是 Bootstrap 问题。请参阅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>
最佳答案
将响应式嵌入组件与 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%;
}
关于javascript - 如何为 iPad 设置 iframe？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26394016/