iframe 在仅限 iOS 的设备上没有响应

Question

我可能只需要另一双眼睛来解决这个问题，但我无法找到我所缺少的东西。目前，我有一个 iframe，其宽度远远超出了我设置的 Boostrap 12 col 和 CSS 以保持响应。在测试我正在制作的网站时，它在所有桌面浏览器中都能正常工作。我在 Chrome 和 Safari 中都进行了模拟，并且在那里运行良好。但是一旦发布到 Github，页面就不能正常工作了。

请注意，bootstrap 在站点的其余部分中是 100% 响应的。一切都留在列中并适应。即使在加载页面时，您也不会注意到 iframe，直到您向下滚动到它。但是 Jumbotron、Navbar 等都还可以。我也根据需要将 this 放在顶部。

<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 而不是类，但它仍然不能解决问题。

Answer 1

假设您无法编辑 iframe 原点，您可以将 iframewidth 设置为小于视口的值，然后覆盖它。

所以，我们有这样的东西

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}