最近在项目中,使用iframe层展示商品详情。于是将网页嵌在了iframe标签里面,在PC测试没有问题,自适应良好,但是转入IOS 真机中,iframe 却不能很好地适应屏幕大小,总是超出屏幕尺寸,也无法上下左右滚动查看完整页面。
1、iframe无法滚动:(使用一个div将iframe包含起来,给该div设置一下class)
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
layer.open({
type: 2,
title: '查看商品详情',
scrollbar: false,
area: ['100%', '100%'],
content: url,
success: function(layero){
$(layero).addClass("scroll-wrapper");//苹果 iframe 滚动条失效解决方式
}
});
此时,我的iframe可以上下滚动的查看了,但是iframe的宽度还是超出了可视的区域,经过一番搜索,找到如下方式:
2、iframe宽度变宽的问题
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
<iframe src=".." frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;">
</iframe>
</div>
1⃣️ 给iframe外面套上一层div,将该样式设置为:”overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;”
2⃣️ 给iframe设置属性scrolling=’no’
3⃣️ 设置iframe的宽度为:”width: 1px; min-width: 100%; *width: 100%;”
ps:上面的方式基本可以解决这两个问题,但是在测试中ios端还是会有失效的情况;因为移动端不推荐使用iframe,这是webview本身的问题;