TagError：adsbygoogle.push() 错误：当我使用响应式广告时，availableWidth=0 没有插槽大小答案

【问题标题】：TagError: adsbygoogle.push() error: No slot size for availableWidth=0 when i use responsive adsTagError：adsbygoogle.push() 错误：当我使用响应式广告时，availableWidth=0 没有插槽大小
【发布时间】：2018-11-22 11:14:09
【问题描述】：

我为 Adsense 设置了自适应广告

我收到错误：

未捕获的异常：TagError: adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小

在每个包含此代码的页面上

<style type="text/css">
.adslot_2 { display:inline-block;width: 336px; height: 280px;}
@media (max-width: 336px) { .adslot_2 { width: 300px; height: 250px; } }
@media (min-width: 500px) { .adslot_2 { display: none; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_2" data-ad-client="removed for security purpose" data-ad-slot="removed for security purpose" data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

我尝试过多次篡改代码，但仍然出现相同的错误请注意，我有其他具有不同代码的响应式广告单元没有显示此错误，因此我 100% 确定问题出在代码本身

我的目标是从桌面隐藏广告并在移动设备上展示它

代码有什么问题？

【问题讨论】：

标签： adsense

【解决方案1】：

在 Google AdSense 中有（基本上）两种不同的自适应广告单元“调整大小”方法。

“根据可用空间自动调整大小” data-ad-format。请参阅About responsive ad units 页面。
"精确每个屏幕宽度的广告单元尺寸”，带有@media 查询。参见How to modify your responsive ad code 页面。（您会发现有“变体”，此方法的不同实现。）

第一个是自动的，第二个是“手动”。

通常没有方法可以同时自动和手动，因为两者之间会有冲突，我认为如果您删除data-ad-format="rectangle"，您的代码应该可以正常工作。

如果这对您有用，请再次检查 Google AdSense 信息中心中的“我的广告”>“广告单元”页面，并确保该广告单元 ID (data-ad-slot) 列为“响应式” - 这两种方法均不适用于固定尺寸的广告单元。

【讨论】：

成功了，非常感谢您的回答 :) 我试图为您的回答投赞成票，但我昨天加入时仍然没有足够的声誉

【解决方案2】：

我遇到了类似的问题。我注意到这是因为根据屏幕大小使横幅不可见。一个解决方案是重命名“adsbygoogle”类（我选择了“ADSENSE”），以确保在我将横幅从 DOM 中删除之前，如果它们在加载样式表后不可见，adsense 脚本不会对它们做任何事情（因此是“加载”事件）：

window.addEventListener('load', () => {
 let matches = document.querySelectorAll("ins.ADSENSE");

        Array.from(matches).forEach((element) => {
            let parentElement = element.parentElement;
            if (window.getComputedStyle(parentElement).getPropertyValue("display") === "none")  { 
                element.remove(); 
            } else {
            element.classList.remove("ADSENSE");
            element.classList.add("adsbygoogle");
                (adsbygoogle = window.adsbygoogle || []).push({}); 
            }
        });

});

【讨论】：