最近在项目中，使用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本身的问题;