如何使响应式 AdSense 单元在浏览器调整大小时更改其大小答案

【问题标题】：How to make responsive AdSense unit change its size on browser resize如何使响应式 AdSense 单元在浏览器调整大小时更改其大小
【发布时间】：2014-11-23 01:44:43
【问题描述】：

我在高级模式下使用自适应 AdSense 单元。在我决定调整浏览器窗口大小之前，它运行良好。广告未按照媒体查询中指定的方式调整大小。

<style>
.myad { width: 320px; height: 50px; }
@media(min-width: 500px) { .myad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .myad { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle myad"
     style="display:inline-block"
     data-ad-client="XXX"
     data-ad-slot="XXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS 是正确的。在 Firebug 中，我可以看到媒体规则划掉并替换为以下内容：

element.style {
  display: inline-block;
  height: 90px;
  width: 728px;
}

【问题讨论】：

标签： html css responsive-design media-queries adsense

【解决方案1】：

您的自适应 Google Ads 没有问题。

当您更改浏览器大小时，Google Ads 不会自动调整大小。如果您刷新浏览器，Google Adsense 将显示/投放新广告，其尺寸与您的浏览器/页面的当前尺寸相匹配。

我试图找到文件来验证我的陈述，但我找不到任何相关的东西。我的回答基于我使用自适应 Google 广告并对其进行测试的经验。

2019 年 5 月 30 日更新 - 所有广告单元默认响应

Google 于 2019 年 5 月 30 日向 Adsense 发布商发送了一封电子邮件，告知即将对广告单元进行的改进。

电子邮件说：

我们致力于不断投资于广告产品的现代化。因此，我们将对您过去使用或配置的一些 AdSense 功能进行一些重要更改。您的广告标签将在未来几周内更新，以反映以下变化：

广告尺寸
我们让创建和管理广告单元变得更加容易。默认情况下，所有广告单元都将创建为自适应，以适应移动设备和桌面设备上的不同屏幕尺寸，从而提高性能和灵活性。如果您确实需要进一步自定义，您仍然可以创建自定义尺寸的广告单元。

因此，在接下来的几周内，所有广告都将默认为响应式。以下是包含更多信息的两个 Google Adsense 帮助页面：

About responsive ad units

Create a responsive ad unit

【讨论】：

您能否提供该声明的任何来源？如果没有此功能，响应性将毫无用处。
不幸的是我没有任何来源。我在我的网站上使用了响应式 Google Ads，并注意到它们在调整浏览器窗口大小时没有调整大小。 Google 仅在首次投放/加载新广告时加载。
我花了很长时间想知道为什么我的广告没有调整大小！尝试改变样式，添加 div 标签……答案是显而易见的，一旦你阅读它。谢谢。

【解决方案2】：

我在 adsense 博客上读到他们计划解决这个问题，这意味着这是一个已知问题。

【讨论】：

【解决方案3】：

https://support.google.com/adsense/answer/3213689

例如，如果您有 30% 的宽度并将我们的自适应广告代码放在中，那么根据用户屏幕的宽度，我们将自动投放不同的广告尺寸。如果在宽度为 1024 像素的平板电脑上查看您的网页，我们将投放 307x250 的广告，如果在宽度为 1680 像素的 21 英寸台式电脑上查看，我们将投放 504x60 的广告。

意味着当屏幕发生变化时，它会保留第一个加载的内容。它实际上没有响应。

【讨论】：