如何使响应式Google-adsense广告在调整大小时缩放？

Question

我正在使用google adsense响应式广告(与Bootstrap)，它在页面加载上工作正常。此外，在手持设备中，它可以正确地检测方向，并立即调整广告。

但是，当我调整浏览器的大小时，它不会对此做出反应。在没有内置系统来检测屏幕大小调整的情况下，声称响应是很奇怪的。我曾想过添加一个eventlistener，但这是一个好的解决办法，还是会失败呢？我也想过加载不同大小的广告，但我想避免这种情况，只使用“响应式”广告。

提前感谢您的任何建议。

Answer 1

在响应式广告中，将data- ad -format "auto“更改为"horizontal”

data-ad-format="horizontal"

还添加了媒体查询移动高度限制。

.adsense-mobile {
    height: 60px;
}

最终结果：

<ins class="adsbygoogle adsense-mobile"
             style="display:block"
             data-ad-client="ca-pub-XXXXXX"
             data-ad-slot="XXXXXX"
             data-ad-format="horizontal"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

Answer 2

首先，使用percents或px (percents很容易扩展)指定您希望广告适合的div的高度和宽度。

然后，使用CSS创建媒体查询，以根据屏幕查看的高度和宽度更改广告div的高度和宽度。

接下来，将类似.adDiv iframe { max-width:100% !important; max- height:100% !important;}的内容添加到CSS中。这将告诉浏览器以div的全尺寸呈现广告(假设它是一个iframe)，并且!important覆盖由广告或任何插件设置的任何CSS。

希望这能有所帮助！

Answer 3

使用带有异步的Google Adsense响应式广告单元。它可以很好地显示所有大小的网站，它将加载后，您的网站加载完成。

所以，你需要先编写用于响应所有设备的CSS，而Google Adsense将加载延迟，它不会使你的网站破坏响应设计。调整您的屏幕大小在这种情况下是不正确的，因为您的网站加载了完整的。