iOS 上带有 CSS 的 iframe 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16937070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframe size with CSS on iOS
提问by Guido Bouman
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
有一个 iframe，它的内容基本上比框架中的内容要多。框架的大小基于浏览器屏幕大小并让溢出滚动，这在除 iOS 之外的所有浏览器上都能完美运行。在 iOS 上，safari 决定调整框架的大小以适应内容。不是你所期望的。
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
jsFiddle 上的示例代码：http:
//jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
在你的 iOS 设备上试一试：http:
//jsfiddle.net/R3PKB/2/embedded/result
The HTML:
HTML：
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
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;
}
回答by nvreez
You can make it work by adding a wrapping div with overflow: auto;and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
您可以通过添加一个带有overflow: auto;和的包装 div 来使其工作-webkit-overflow-scrolling:touch;。这是你的例子：http: //jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here: https://stackoverflow.com/a/6721310/1047398iframe on iOS (iPad) content cropping issue
根据之前关于 SO 的问题，这是自 iOS 4 以来的错误。我在这里找到了更多信息：https: //stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) 内容裁剪问题
回答by Andrei Cojea
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page: How to get an IFrame to be responsive in iOS Safari?
这是一个老问题，但由于它首先出现在 google 上，并且该问题存在于当今的 ios 设备上，因此我重新发布了我在此页面上找到的更好的修复程序： 如何让 IFrame 在 iOS Safari 中响应？
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100%with height: 1px; min-height: 100%;.
基本上，如果你有一个带滚动的 iframe（比如一个 twitter 小部件），上面的解决方案不会很好地工作，因为它使父级可滚动。对我有用的修复程序正在替换height: 100%为height: 1px; min-height: 100%;.
回答by Kyle Dumovic
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no"as an attribute to the iframe. This should prevent it from automatically fitting its content.
如果 iOS Safari 显示的 iframe 内容来自与预期不同的来源（即它移动了一些像素），请尝试将其scrolling="no"作为属性添加到 iframe。这应该可以防止它自动拟合其内容。
More here.
更多在这里。
回答by Chrispy
using height: 1px; min-height: 100%;did not work for me, though I did not need a scrolling element. I had to use the overflow:auto;on a surrounding divinstead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
usingheight: 1px; min-height: 100%;对我不起作用，尽管我不需要滚动元素。我不得不overflow:auto;在周围使用div。请注意，不鼓励使用此方法，因为它可能会产生意想不到的后果，但我在 Android/iOS 和桌面浏览器上进行了测试，但尚未发现任何问题。十指交叉。
This is a nice post from Andy Shora on some iOS iframenuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
这是 Andy Shora 关于一些 iOSiframe细微差别的好帖子：http: //andyshora.com/iframes-responsive-web-apps-tips.html
