如何修复消息：“adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小”用于响应式 google adsense？

Question

我目前正在使用响应式布局，并且有两个 adsense 单元，其中一个将根据屏幕大小显示在用户的屏幕上，代码如下所示：

<div id="ad_right" class="d-none d-md-inline">
    <ins class="adsbygoogle" style="display:block; margin-left:20px;" data-ad-client="ca-pub-rightslot" data-ad-slot="rightslot" data-ad-format="auto" data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

<div id="ad_bottom" class="d-md-none">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-bottomslot" data-ad-slot="bottomslot" data-ad-format="auto" data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

如您所见，如果用户的屏幕与 PC 尺寸（md 或更大）匹配，则右侧的广告会显示，如果用户的手机/平板电脑屏幕（xs 或 sm），则底部的广告会显示。问题是，元素是隐藏的，但脚本总是运行，因此代码运行了两次：

<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

导致 google adsense 的错误信息。我该如何解决这个问题？我尽我所能但无法解决这个问题。

Answer 1

AdSense 会跳过隐藏的广告位：如果 ins 标记具有 display: none - 则不会被处理。目前它不检查父母，例如父母是否有display: none - 即使广告位不可见，它也不会被视为隐藏。因此，在隐藏元素时尝试在元素本身上应用样式。