iphone在iframe页面的宽度不受父页面影响，避免撑开页面

Posted 2020-09-12 AiTing on the way

因为工作需要在H5小游戏中插入广告，所以小游戏要放在iframe里面，但是那样的话在iphone手机上iframe的宽度限制不住，在android设备上面是正常的所以要单独对iframe里面的body进行宽度限制才能实现效果。可以用css也可以用js来控制：

 

css就不写啦，js控制如下：判断浏览器设备，然后修改样式：

if (!navigator.userAgent.match(/iPad|iPhone/i)){

}else{
//如果是iphone,ipad，则重新修改body宽度值
alert("网页可见区域宽："+document.body.clientWidth+"\n 屏幕可用工作区宽度："+ window.screen.availWidth+"\n");
var bodyWidth = (window.screen.availWidth/document.body.clientWidth)*100+‘%‘;
document.write("<style>html,body{width:/‘"+bodyWidth+"/‘}</style>");
alert(bodyWidth);
}