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

Question

我可能只需要另一双眼睛看这个，但我看不到我缺少的东西。目前我有一个 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 而不是类，但它仍然没有解决问题。

Answer 1

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

所以，我们有这样的东西

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