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/

参考链接: