响应式设计和 Google Adsense - 无法正常工作答案

【问题标题】：Responsive Design & Google Adsense - can't get it to work响应式设计和 Google Adsense - 无法正常工作
【发布时间】：2014-10-20 21:04:06
【问题描述】：

我正在尝试使用Google Adsense 上的新响应式广告单元将我网站上的静态广告更改为响应式广告

我卡住了，这是我的代码：

HTML：

<div class="g-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive-Forum-Bot -->
<ins class="adsbygoogle g-ad-in"
     style="display:inline-block"
     data-ad-client="ca-pub-client"
     data-ad-slot="adnumber"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

CSS：

@media (min-width:500px){
    .g-ad, .g-ad-in{
        width:468px
    }

    .g-ad-in{
        height:60px
    }
}

@media (min-width:800px){
    .g-ad, .g-ad-in{
        width:728px
    }

    .g-ad-in{
        height:90px
    }
}

我的问题是容器改变了宽度，但它自己的广告没有。难道我做错了什么？我使用了顶部的指南并按照它..

提前致谢，丁。

【问题讨论】：

标签： asynchronous responsive-design adsense

【解决方案1】：

两件事：
1) 您需要为 css 类“g-ad”指定高度，因为容器 div 具有该类。
2) AdSense 响应式广告并非 100% 响应：在调整窗口大小时，广告不会适应它的容器，在您调整窗口大小后，您必须刷新页面才能看到新尺寸的广告。
谷歌在页面加载时根据广告容器的宽度和高度调整广告，当然我们（开发人员）对此并不“太高兴”，我在 AdSense 博客上读到他们计划解决这个问题。

【讨论】：