在iOS上使用CSS的iframe大小

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

你可以把它加入了包装DIV一起工作overflow: auto;和-webkit-overflow-scrolling:touch;.这是你的例子:http://jsfiddle.net/R3PKB/7/

根据之前关于SO的问题,这是自iOS 4以来的一个错误.我在这里找到了更多信息: iOS(iPad)内容裁剪问题上的/sf/answers/470491731/ iframe

Answer 2

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

基本上,如果你有一个带有滚动的iframe(让我们说一个推特小部件),上面的解决方案将无法正常工作,因为它使父卷轴可滚动.为我工作的修复程序替换height: 100%用height: 1px; min-height: 100%;.

Answer 3

如果iOS Safari从不同的原点显示您的iframe内容(即它被某些像素移动),请尝试将其scrolling="no"作为属性添加到iframe.这应该可以防止它自动适应其内容.

更多这里.