场景是这样的,业务需要展示协议,我们公司所有产品的多个地方都有展示协议的需要,于是,我们就封装了一个组件,一个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;这样。
经过尝试,非常香,减少了很多工作量。