自适应 Adsense 广告单元不会以 320x50 像素显示

Question

我有一个响应式 Adsense 广告单元，我想将它用作我的响应式网站的页脚。我正在使用媒体查询，如 Adsense 文档中所述，以便在不同的屏幕宽度下设置高度/宽度。

这是我的 CSS：

<style>

@media (min-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }
}

@media (min-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}
</style>

这是我的 HTML：

  <ins class="adsbygoogle adslot-desktop"
   data-ad-client="xxxxx"
   data-ad-slot="xxxxxx"
   data-ad-format="auto"></ins>

在屏幕宽度超过 500 像素时，我得到了预期的 468x60 广告。但是，低于 500 像素时，我会看到 320x100 的广告。

为什么它没有像我指定的那样为我提供 320x50 广告？

Answer 1

我曾经在 WP 中遇到过这样的问题，我唯一的想法就是更改媒体查询的顺序。不确定这里是否相同，但您可以尝试这样做。最高的 px 在顶部，然后向下。

** 我改用 max-width 让它工作

@media (max-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}

@media (max-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }

}

Answer 2

我认为您需要删除data-ad-format，因为data-ad-format 是智能调整大小：

我们根据宽度动态计算所需尺寸 广告单元的父容器，然后确定最佳标准 高度与该宽度一致。

关于自适应广告单元：
https://support.google.com/adsense/answer/3213689

你想要的是“每个屏幕宽度的确切尺寸”：

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

创建自适应广告单元 > 高级 > 每个屏幕宽度的确切尺寸：https://support.google.com/adsense/answer/3543893#adv