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

希望工作正常。

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

1 个答案: