gpt4 book ai didi

javascript - 如何为 iPad 设置 iframe?

转载 作者:太空宇宙 更新时间:2023-11-03 17:55:39 24 4
gpt4 key购买 nike

我对 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com