iphone上使用iframe时页面宽度变大的解决方法

场景是这样的，业务需要展示协议，我们公司所有产品的多个地方都有展示协议的需要，于是，我们就封装了一个组件，一个iframe里读取从后管获取的协议页面。

起初，协议页面没有设置上下左右边距，ios的页面和安卓的页面还是没有什么区别的。后来业务提了新需求，美化了一下页面，在协议页面上下左右加了边距，于是就出现了ios整体页面宽度大于屏幕宽度的bug，页面出现横向滚动条，协议内容部分被遮盖，需要用户手动拉一下滚动条才能看全协议内容。

网上查了ios使用iframe时有个bug:页面宽度会扩大，超出一个屏幕的宽度。

网上看了看有一种解决方案时这样的：在iframe加载完成后，设置 iframe里面body的宽度为clientWidth的宽度。

function iosIframeWidthBug(){
    //不是 iphone ipad就不执行了
    if (!navigator.userAgent.match(/iPad|iPhone/i))
        return false;
    //获取子iframe
    var iframebody = document.getElementById('iframe1').contentWindow.document.body;
        iframebody.style.width = document.body.clientWidth+'px';
 
}

于是，就尝试一波，在iframe页面加载的时候，vue的话就是created钩子函数里，执行上面的函数。果然，效果是好的。页面显示正常了。

但是，如果是这样改的话，很多地方都要改。。。。因为用到协议页面的地方太多了。于是，我们的小leader提出来另一种方法，在协议页面的body里设置box-sizing:border-box;padding:xxpx xxpx;这样。

经过尝试，非常香，减少了很多工作量。