在iOS上使用CSS的iframe大小
有一个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; }
你可以通过添加一个带overflow: auto;的包装div来工作overflow: auto; 和-webkit-overflow-scrolling:touch; 。 这是你的例子： http : //jsfiddle.net/R3PKB/7/
根据以前的问题，这是从iOS 4以来的一个错误。我在这里find更多信息： https： //stackoverflow.com/a/6721310/1047398 iOS（iPad）内容裁剪问题iframe
这是一个古老的问题，但由于它首先在谷歌和现在的iOS设备上存在的问题，我转发了一个更好的解决scheme，我发现在这个页面上： 如何获得一个IFrame在iOS的Safari响应？
基本上，如果你有一个滚动的iframe（ 让我们说一个叽叽喳喳小部件 ），上述解决scheme将不会工作得很好，因为它使父可滚动。 修复工作对我来说是取代height: 100%的height: 1px; min-height: 100%; height: 1px; min-height: 100%; 。
如果iOS Safari显示的iframe内容来自与预期不同的来源（例如，它被移动了一些像素），请尝试添加scrolling="no"作为iframe的属性。 这应该防止它自动适应其内容。
更多在这里。
使用height: 1px; min-height: 100%; height: 1px; min-height: 100%; 没有为我工作，虽然我不需要滚动元素。 我不得不使用overflow:auto; 在一个周围的div而不是。 请注意，这种方法是不鼓励的，因为它可能会有意想不到的后果，但我在Android / iOS和桌面浏览器上testing，并没有发现任何问题。 手指交叉 。
这是来自Andy Shora的一个很好的post，在一些iOS的iframe细微差别： http ://andyshora.com/iframes-responsive-web-apps-tips.html
