Blogger中AdSense响应式广告单元故障求助

我之前在Blogger上折腾AdSense响应式广告的时候也碰到过几乎一模一样的问题！你的代码其实已经有了桌面端的尺寸定义，但漏了关键的移动端隐藏逻辑，另外还有几个容易踩的坑，我帮你梳理下：

核心问题：缺少移动端隐藏规则 #

你当前的CSS只定义了桌面端（≥961px）下广告的尺寸，但默认情况下.ad-test1元素还是会在小屏幕上显示——因为你没告诉浏览器“在小于961px的屏幕上要隐藏它”。

修正后的完整代码 #

直接用下面的代码替换你现有的广告代码，就能实现仅桌面端显示的效果：

<style>
  /* 默认状态下隐藏广告，确保移动端不显示 */
  .ad-test1 {
    display: none;
  }

  /* 仅在桌面端（≥961px）显示并设置尺寸 */
  @media(min-width: 961px) {
    .ad-test1 {
      display: inline-block;
      width: 100%;
      height: 90px;
    }
  }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad-test1 -->
<ins class="adsbygoogle ad-test1"
     data-ad-client="ca-pub-ZZZZZ"
     data-ad-slot="你的广告位ID"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

额外排查点（如果还是失效的话） #

• 检查模板全局样式冲突：打开浏览器开发者工具（F12），选中广告元素，查看「样式」面板，看有没有Blogger模板的全局样式覆盖了你的.ad-test1规则——如果有的话，可以给你的样式加上!important临时测试（比如display: none !important;），或者调整选择器优先级。
• 确认AdSense广告单元类型：在AdSense后台创建广告单元时，要选择「响应式」类型，不要选固定尺寸的，否则AdSense会强制使用后台设置的尺寸，忽略你的CSS。
• 清除缓存测试：有时候浏览器缓存会导致新样式不生效，用隐身模式打开你的博客，或者手动清除缓存后再测试。

内容的提问来源于stack exchange，提问作者ariel