iframe大小与CSS在iOS上 [英] iframe size with CSS on iOS

问题描述

有一个iframe，它基本上有更多的内容比适合框架。框架的大小基于浏览器屏幕大小，并允许溢出滚动，这在所有浏览器，除了iOS的完美。在iOS上，safari决定调整框架大小以适合内容。

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.

jsFiddle上的示例代码：

http://jsfiddle.net/R3PKB/2/

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

在您的iOS设备上试用：

< a href =http://jsfiddle.net/R3PKB/2/embedded/result> http://jsfiddle.net/R3PKB/2/embedded/result

Try it out on your iOS devices:
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; 和 -webkit-overflow-scrolling：touch; 添加一个包装div。
以下是您的示例： http://jsfiddle.net/R3PKB/7/

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/

根据以前的问题，这是从iOS 4开始的一个错误。我在这里找到更多信息：
http://stackoverflow.com/a/6721310/1047398
iframe在iOS（iPad）内容裁剪问题

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

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