我对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%;
}