【发布时间】：2014-04-23 04:05:17
【问题描述】：
我正在尝试在我的网站上展示自适应 Google Ads。包含 Google Ads 代码的框也是响应式的，它会根据Google's Ad unit sizes 将自身转换为不同的尺寸。
因此，对于不同的屏幕尺寸，我会从该页面显示合适的广告尺寸，就像这样（广告空间的完整 LESS）：
.ads {
width: 733px;
height: 116px;
margin: 70px 0 0 30px;
border: 2px solid @dry-red;
background-color: white;
padding: 0;
border-radius: 4px;
margin-right: 15px;
float: right;
.headline {
background-color: @dry-red;
width: 100%;
font-size: .8em;
padding: 2.5px 0 2.5px 4px;
color: white;
margin: 0;
border-bottom: 1px solid @dry-red-xl;
}
@media (max-width: 1200px){
width: 468px;
height: 86px;
}
@media (max-width: 992px){
width: 323px;
height: 126px;
}
@media (max-width: 768px){
width: 468px;
height: 61px;
margin: 50px 20px;
float: none;
}
@media (max-width: 766px){
margin: 5px auto 5px auto;
}
@media (max-width: 470px){
/* display: none; */
width: 323px;
height: 126px;
}
}
到目前为止一切顺利。盒子在达到顶峰时会发生变化。请注意，Google 的原始广告尺寸增加了大约 26 像素以上，以适应 .headline。
现在，我将 Google Ads 单元的代码放在 HTML 中，如下所示：
<section class="ads col-lg-8 col-md-7 col-sm-7">
<div class="headline">Advertisement</div>
<!-- IMGzer_Header -->
<style type="text/css">
.adslot_1 { width: 728px; height: 90px; }
@media (max-width:470px) { .adslot_1 { width: 320px; height: 100px; } }
@media (max-width:768px) { .adslot_1 { width: 468px; height: 60px; } }
@media (max-width:992px) { .adslot_1 { width: 320px; height: 100px; } }
@media (max-width:1200px) { .adslot_1 { width: 468px; height: 60px; } }
</style>
<ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="SOME_NUMBER" data-ad-slot="SOME_NUMBER"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
您可能会注意到，我尝试使用两种变体：
- 使用 CSS3 媒体查询（已注释）
- 并使用
data-ad-format="horizontal"数据属性。
我在Google Ads article 中读到了这两个。
这些都不起作用，我的广告尺寸仍然是728x90px。当浏览器屏幕变小时，我的 Google 广告根本不会调整到它们各自的尺寸。
我们将不胜感激。
My actual website having this problem
更新
所以我玩了一遍，仍然一无所获。我试图更接近 Google 的示例，并在媒体查询中使用 min-width 而不是 max-width。没有结果。我仍然得到 728x90 尺寸，尽管除了 min-width: 1200px 媒体查询之外它不包含在其他任何地方，并且它仍然拒绝调整大小。这真的很烦人。
<section class="ads col-lg-8 col-md-7 col-sm-7">
<div class="headline">Advertisement</div>
<style>
.adslot_1 { width: 320px; height: 100px; }
@media (min-width: 768px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width: 992px) { .adslot_1 { width: 320px; height: 100px; } }
@media (min-width: 1200px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- IMGzer_Header -->
<ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="ca-pub-1234" data-ad-slot="XXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
<div class="clearfix"></div>
.ads 的 CSS/LESS 仍然与上面相同。我注意到的是，当我通过 Firebug 检查我的代码时，我看到了这一行：
<ins data-ad-slot="XXXXX" data-ad-client="ca-pub-1234" style="display: inline-block; width: 728px; height: 90px;" class="adsbygoogle adslot_1" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent" id="aswift_0_anchor"><iframe width="728" scrolling="no" height="90" frameborder="0" style="left:0;position:absolute;top:0;" name="aswift_0" id="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe></ins></ins></ins>
这段代码是从哪里得到宽度和高度的？宽度为 728，高度为 90。就好像他们以某种方式固定在那里，他们完全忽略了我的媒体查询。我绝对确定我在 AdSense 设置中选择了响应式单元。
我没有看到什么？
【问题讨论】：
标签： html css media-queries ads