iOS 上带有 CSS 的 iframe 大小 [英] iframe size with CSS on iOS

问题描述

有一个 iframe，它的内容基本上比框架中的内容要多.框架的大小基于浏览器屏幕大小并让溢出滚动，这在除 iOS 之外的所有浏览器上都能完美运行.在 iOS 上，safari 决定调整框架的大小以适应内容.不是您所期望的.

jsFiddle 上的示例代码:
http://jsfiddle.net/R3PKB/2/

在您的 iOS 设备上试用:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<iframe class="my_frame">//内容</iframe>

CSS:

body {位置:相对；背景:#f0f0f0；}.frame_holder {位置:绝对；顶部:50px；底部:50px；左:50px；右:50px；背景:#ffffff；}.my_frame {宽度:100%；高度:100%；边框:1px 实心 #e0e0e0;}

解决方案

您可以通过添加带有 overflow: auto; 和 -webkit-overflow-scrolling 的包装 div 使其工作:触摸;.这是你的例子:http://jsfiddle.net/R3PKB/7/

根据之前关于 SO 的问题，这是自 iOS 4 以来的错误.我在这里找到了更多信息:https://stackoverflow.com/a/6721310/1047398iOS (iPad) 上的 iframe 内容裁剪问题

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.

Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/

Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result

The HTML:

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

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

解决方案

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/

According to previous questions on SO it's a bug since iOS 4. I found more info here: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

这篇关于iOS 上带有 CSS 的 iframe 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！