Twitter bootstrap Adsense响应：availableWidth=0没有插槽大小

您如何在响应性网站布局上使用谷歌adsense响应块？让我们考虑一下这个简单的例子（用Bootstrap编写）：

菜单
内容
Adsense列

所以我们有3列大屏幕布局，只有两列小屏幕布局。右栏不是很重要，所以我们只是隐藏它，它包括adsense响应块，我们也隐藏它

如果我们在小屏幕上打开此页面，我们会得到一个错误

TagError:adsbygoogle.push（）错误：availableWidth=0的插槽大小不可用。如何避免这种情况

理想情况下，如果窗口大小改变，我想重新初始化adsense块（在小屏幕上打开，然后放大，第三列变为可见，这将触发adsense在显示列中的初始化），但我认为现在不可能

我试图将adsense放置到固定大小的容器（位于隐藏的xs块中），但它不起作用，错误仍然出现

我还尝试将响应类添加到
…
，但它也没有删除错误。
我也遇到了同样的问题，即使我禁用了push（）调用，我仍然会收到错误，因为谷歌在下次调用push（）时仍会找到此广告元素（对于不同的广告）

最后，当我只在消失的div没有隐藏的情况下注入fly的JavaScript时，它才起作用



/*  */
//当隐藏的xs不起作用（div可见）时手动插入此广告
//否则，当调用next.push（）时，google广告将尝试推送它
if（$（“#广告右上包装”）.css（“显示”）！=“无”）{
文件。填写（“”）；
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
}
我也有类似的问题。从理论上讲，谷歌Adsense允许你将媒体查询与显示结合使用：在响应性广告单元上不显示，因此某些单元只在大屏幕或小屏幕或手机上显示。实际上，javascript代码会在它们身上崩溃。我添加了一个自定义javascript来延迟加载单元，直到构建DOM为止，并删除媒体查询显示为“无”的所有“ins”块

我的解决办法如下。它很难看，只能在JQuery加载后执行，在我的站点中我是异步执行的。因此，它不能（在我的网站上）直接放在HTML上

$(document).ready(function() {
  $('ins').each(function(){
    if ($(this).css("display") == "none") {
      $(this).remove();
    }
  });
  (adsbygoogle = window.adsbygoogle || []).push({});
});

我认为这个问题与数据广告格式属性有关。我从ins标记中删除了该属性。在此之后，检查显示是否设置为“块”，最后添加属性

<div class="hidden-md hidden-lg">
<ins class="adsbygoogle" style="display:block" 
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" 
data-ad-slot="XXXXXXXXXX"></ins>
<script>
    var el = document.querySelector('.hidden-md, .hidden-lg');
    var display = window.getComputedStyle(el, null).getPropertyValue('display');
    var ins = el.querySelector('ins');
    if (display === 'block'){
        ins.setAttribute('data-ad-format', 'auto');
    }
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>


var el=document.querySelector（'.hidden md，.hidden lg'）；
var display=window.getComputedStyle（el，null）.getPropertyValue（'display'）；
var-ins=el.querySelector（'ins'）；
如果（显示=='block'）{
ins.setAttribute（'data-ad-format'，'auto'）；
}
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；

如果您向ads包装器添加了一个响应的
可见的
或
隐藏的
引导类（在下面的示例中，id为
ads包装器的
），请将相同的类添加到Google ads
标记中

<div id="ads-wrapper" class="hidden-xs hidden-sm"> 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle hidden-xs hidden-sm"
       data-ad-client="ca-pub-0123456789"
       data-ad-slot="0123456789">
    </ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>


（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；

<div id="ads-wrapper" class="hidden-xs hidden-sm"> 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle hidden-xs hidden-sm"
       data-ad-client="ca-pub-0123456789"
       data-ad-slot="0123456789">
    </ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>