我可能只需要另一双眼睛看这个,但我看不到我缺少的东西。目前我有一个 iframe,它的宽度远远超出了我设置的 Boostrap 12 col 和 CSS 以保持响应。在测试我正在制作的网站时,它在所有桌面浏览器中都能正常工作。我在 Chrome 和 Safari 中都进行了模拟,并且在那里运行良好。但是一旦发布到 Github,该页面就无法正常工作了。
请注意,bootstrap 在网站的其余部分是 100% 响应的。一切都留在列中并进行调整。即使在您加载页面时,您也不会注意到 iframe,直到您向下滚动到它。但是 Jumbotron、Navbar 等都还好。我也根据需要将此放在顶部。
<meta name="viewport" content="width=device-width, initial-scale=1">
这是 iframe 的设置。不要介意我笨拙的 DIV 设置。我更喜欢这样,而不是有时在同一个 class=""中使用多个类名。
<div class="container">
<div class="row">
<div class="menu">
<div class="col-xs-12">
<iframe class="menuwindow embed-responsive-item" src="https://docs.linkhere"></iframe>
</div>
</div>
</div>
</div>
这是支持该框架的 HTML 的 CSS
.menuwindow {
margin-top: 10rem;
margin-bottom: 10rem;
height: 400px;
width: 1px;
min-width: 100%;
*width: 100%;
抱歉,我划掉了我为谁工作。
这是一张在开发浏览器中看起来不错的图片。
这是它在 iOS 设备上的图片。另一件需要注意的是,它甚至会跳出容器,因为右侧没有填充物。
更新:我试图只关注他的 iframe 而不是类,但它仍然没有解决问题。
最佳答案
假设您无法编辑 iframe 原点,您可以将 iframe
width 设置为小于视口(viewport)的值,然后覆盖它。
所以,我们有这样的东西
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
关于html - iframe 在仅限 iOS 的设备上没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44681243/