如何使 iframe 在 iOS Safari 中正常工作

Question

我在 iOS Safari 浏览器中的 iframe 内显示 Bootstrap 响应页面时遇到问题。它在 Android Chrome 中运行良好。 在iframes 之一中，页面失去了响应能力，甚至不滚动（水平和垂直）。 在另一个 iframe 中，不同的页面会丢失其页脚，并且垂直滚动会显示 iframe 后面的内容。

The page which loses responsiveness

Scrolling issue

使用以下代码

<iframe src="add.php" frameborder="0" overflow-x: hidden; overflow-y:hidden; style="height:100%;width:100%;"></iframe>  

分别尝试了以下

<iframe src="add.php" frameborder="0" style="height:100%;width:100%;"></iframe> 

iframe{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

还有：

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

使用 jQuery 1.11.3、Boostrap 3.3.5、respond.js、html5shiv.js、modernizr.js

Answer 1

尝试使用这个：

iframe {
    border:none;
    position: fixed;
    width:100%;
    height:100%;
    overflow: auto;
}

这将使您的iframe 适合屏幕，以便所有内容都保留在您的视图中。 并确保您已从正文中删除 margin

Here is preview of W3Schools in iframe

希望一切顺利。