iframe-size-not-work-in-IOS

发表于   |   分类于   |     |   阅读次数

最近遇到一个问题，就是iFrame在iPad上展示的时候，宽度并没有固定，会直接超出，通过嵌套div之后，无法滚动。

HTML

1
2
3
4
5
<section class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</section>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

例子：

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

可以在你的iPad上去看看这个页面

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

解决方案是：

在外层的div上添加overflow:auto和-webkit-overflow-scrolling:touch就可以了。

http://jsfiddle.net/R3PKB/7/

参考链接：