在iOS上使用CSS调整iframe大小

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;
}

5
感谢您对这个问题做出清晰分析,我给您点赞。 - Garavani
4个回答

52

哇!这绝对是我迄今为止看到的最接近的解决方案。但实现起来有点复杂,不允许 iframe 大于预期大小。 - Guido Bouman
你能详细解释一下你的意思以及我们如何更好地帮助你吗?你打算使用多大的尺寸和屏幕尺寸,带有50像素的填充(就像你在示例中使用的那样)? - nvreez
标记为答案,因为在iOS中存在错误/安全功能问题,没有其他解决方案。 - Guido Bouman
谢谢,我需要为我的基于 HTML 的 iPhone 应用程序设置 iFrame 大小以适应子帧。 - Michael Shopsin
这将会破坏iframe内的position:fixed元素。 - Simon Backx
@AndreiCojea下面的答案对我来说实际上是有效的,因为我期望这样。 - Andreas

11

这是一个老问题,但由于它在现今的iOS设备上依然存在,因此我重新发布了在How to get an IFrame to be responsive in iOS Safari?页面上找到的更好的解决方法:

基本上,如果你有一个带滚动条的iframe(比如Twitter小部件),上述解决方案将不会很好地工作,因为它会使父级可滚动。适用于我并且有效的修复方法是将height: 100%替换为height: 1px; min-height: 100%;


1
这对我有效,上面那个不尊重 iframe 内容的响应式布局。 - Andreas

7
如果iOS Safari显示的iframe内容与预期不同(即它向左或向右移动了一些像素),请尝试将scrolling =“ no”添加为iframe的属性。这样应该可以防止它自动适应其内容。
更多信息在此处

寻找了2个小时的好解决方案,最终这个解决方案解决了我的问题!谢谢! - udidu
这对我没有起作用,但我也是从同一来源加载的。 - Andreas
我希望我能给这个答案多个赞。非常准确,解决了我的iOS(Safari)问题,iframe内容被水平截断。非常感谢Kyle Dumovic。 - sghosh968

1

使用height: 1px; min-height: 100%;对我没有用,尽管我不需要滚动元素。相反,我必须在周围的div上使用overflow:auto;。请注意,这种方法是不被推荐的,因为它可能会产生意想不到的后果,但我已经在Android / iOS和桌面浏览器上进行了测试,尚未发现任何问题。祈祷

这是Andy Shora关于一些iOS iframe细节的不错文章:http://andyshora.com/iframes-responsive-web-apps-tips.html


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接