问题简介
你的Google AdSense广告是否出现了宽度、高度过大、过小，导致web页面变形、遮盖的问题？下图是coderbbb网站的Google AdSense广告位宽度溢出的截图：
可以看到，因为广告位过宽，导致整个界面变形，十分影响用户体验。但当作者去研究Google AdSense的教程文档时，Google曾明确说明该广告位是“自适应”大小的。也就是说我们展示广告的时候，无需为广告指定长宽。那么到底是为什么会出现上面说的这种情况呢？
经过作者的研究发现，Google AdSense广告宽度、高度自适应失败、错误，通常都是因为广告在父级元素加载、渲染完之前，就加载了。导致Google AdSense对所在HTML DOM元素的长宽判断错误，从而导致显示的广告尺寸错误。
解决方案
我们上一篇文章介绍在Vue中使用Google AdSense广告时（vue页面中添加Google AdSense的正确方法），曾提到过Google AdSense广告位的渲染是通过这行代码(adsbygoogle = window.adsbygoogle || []).push({});来运行的。所以如果你的网站页面出现了Google AdSense广告宽度、高度设置错误的问题时，通常都是因为这行代码过早的运行有关。所以解决方案也很简单，只要控制上面这行代码在HTML页面加载完成之后再执行即可。
作者是通过window.onload=function(){}来控制Google AdSense广告加载时机的，完美解决了广告位宽度、高度自适应失败的问题。如下图所示：
代码演示
因为本站有多个广告位，所以在每个广告位修改加载代码会比较麻烦，于是作者在每个广告位<ins>标签外部包了一层div标签，class名为gads。然后编写了如下JS代码，在需要引入Google AdSense广告的地方执行。代码如下：
window['addAds'] = function(){
window.onload=function(){
let childList = document.getElementsByClassName('gads');
for (let i = 0; i < childList.length; i++) {
let insNode = childList[i].firstChild;
insNode.style.maxWidth = childList[i].clientWidth||childList[i].offsetWidth;
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
}
上面的代码做了双重保险，一方面通过window.onload来控制Google AdSense必须在页面加载完成后，才能开始加载。另外，通过js设置Google AdSense的广告位最大宽度为父级div标签的宽度。
