47

有一个 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;
}
4

4 回答 4

52

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

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

于 2013-06-05T12:26:04.567 回答
11

这是一个老问题，但由于它首先出现在 google 上，并且现在的 ios 设备上存在问题，我重新发布了我在此页面上找到的更好的修复： 如何让 IFrame 在 iOS Safari 中响应？

基本上，如果您有一个带有滚动功能的 iframe（比如说一个 twitter 小部件），那么上面的解决方案将不会很好地工作，因为它使父级可滚动。对我有用的修复程序替换height: 100%为height: 1px; min-height: 100%;.

于 2015-03-17T16:28:54.673 回答
7

如果 iOS Safari 显示您的 iframe 内容的来源与预期不同（即，它移动了一些像素），请尝试将scrolling="no"其作为属性添加到 iframe。这应该可以防止它自动适应其内容。

更多在这里。

于 2016-02-17T20:34:27.163 回答
1

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

这是 Andy Shora 关于 iOSiframe细微差别的一篇不错的帖子：http: //andyshora.com/iframes-responsive-web-apps-tips.html

于 2015-07-09T18:55:47.397 回答