Question

有一个iframe，它基本上拥有的内容多于框架中的内容。框架的大小基于浏览器屏幕大小，并允许溢出滚动，在除iOS之外的所有浏览器上都能完美运行。在iOS上，safari决定调整框架大小以适应内容。不是你期望的。

jsFiddle上的示例代码：
http://jsfiddle.net/R3PKB/2/

在iOS设备上试用：
http://jsfiddle.net/R3PKB/2/embedded/result

HTML：

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

CSS：

body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}

Answer 1

您可以通过添加overflow: auto;和-webkit-overflow-scrolling:touch;的包装div来使其工作。以下是您的示例：http://jsfiddle.net/R3PKB/7/

根据之前关于SO的问题，这是自iOS 4以来的一个错误。我在这里找到了更多信息： https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

Answer 2

这是一个老问题，但由于它首先出现在谷歌上并且现在ios设备上存在问题，我转发了一个更好的解决方案，我在此页面上找到： How to get an IFrame to be responsive in iOS Safari?

基本上，如果你有一个带滚动的iframe（让我们说一个推特小部件），上面的解决方案将无法正常工作，因为它使父级可滚动。对我有用的修复方法是将height: 100%替换为height: 1px; min-height: 100%;。

Answer 3

如果iOS Safari正在显示与预期不同的来源的iframe内容（即它被某些像素移位），请尝试将scrolling="no"作为属性添加到iframe。这样可以防止它自动填充其内容。

更多here.

Answer 4

使用height: 1px; min-height: 100%;对我来说不起作用，但我不需要滚动元素。我不得不在周围的overflow:auto;上使用div。请注意，不鼓励使用此方法，因为它可能会产生意想不到的后果，但我在Android / iOS和桌面浏览器上进行了测试，但尚未发现任何问题。 手指交叉。

这是Andy Shora关于某些iOS iframe细微差别的好文章：http://andyshora.com/iframes-responsive-web-apps-tips.html

在iOS上使用CSS的iframe大小

4 个答案: