javascript - Flexbox 导致 adsense 错误 : "adsbygoogle.push() error: No slot size for availableWidth=0"

Question

我有一个网站，它的布局使用了 angular-material 和 flexbox。我试图在这些 flexbox 容器之一中包含一个 Google Adsense 片段，但它给了我错误:“adsbygoogle.push() 错误:availableWidth=0 没有插槽大小”。但是，如果我将相同的代码片段放在 flexbox 容器之外，它会正常运行。

这并不理想，因为我的整个网站都是用 flexbox 制作的。所以我想找到一种方法在 flexbox 容器中完成这项工作。

这是我的代码片段:

    <div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
      <div flex="" hide-xs="" show-gt-xs="">
        <h1>My Account</h1>
      </div>
      <welcome></welcome>
      <script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- responsive ad-->
      <ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
      <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({})
        });
      </script>
    </div>

我还尝试将谷歌广告中对 flex 的所有引用替换为 display:block;我试过同时使用宽度、无宽度、最小宽度、最大宽度。我试过把它放在一个 div 中，它是一个 flexbox 列，我试过把它放在一个 div 中，它是 display:block;具有固定宽度等。

这些似乎都不起作用。

有什么想法吗？

有没有办法向 Google 报告这个(可能的)错误？

Answer 1

我刚遇到这个问题并寻求帮助。

只找到有关设置固定宽度的信息(在 PX 中？)。

我知道这是不正确的，我目前有一个宽度为 90% 的盒子并且工作正常。

让我恼火的一件事是在较大的显示器上谷歌广告从不居中。

我试着把它变成一个 flexbox 来对齐内容，这就是我的问题开始的地方。

我通过设置 setTimeOut 和 addclass 解决了这个问题。

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }

    var timeoutID;
$(function() {
     timeoutID = window.setTimeout(centerAd, 1000);
})

与类(class):

.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */

它给谷歌广告足够的时间来嗅探元素的宽度，然后很好地居中。通常是无缝的。