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

10-05 20:41
查看更多