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

Question

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

这是我的 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 中遇到过这样的问题，我唯一想到的就是更改媒体查询的顺序。不确定这里是否相同，但您可以尝试这样做。最高像素在顶部然后下降。

** 我改用最大宽度使其工作

@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 是 智能尺寸 :

We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.

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

你要的是"exact size per screen width":

<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

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

Responsive Adsense ad unit won't display at 320x50 px

html

css

adsense