响应式 AdSense 单元的最小高度

Question

我的页面上有一个自适应广告单元，由于某种原因，它的高度为 60 像素，而我确实需要它为 90 像素，并在屏幕变小时时切换到 300x250。有什么办法可以控制吗？

附言 这是非常标准的 AdSense 代码

<div classs="adunit">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Pmember Resp1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****"
     data-ad-slot="*****"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

css 是

.adunit {max-width:730px}

我试过了

<ins class="adsbygoogle"
     style="display:block;min-height:90px"

我试过了

.adunit {min-height:90px}

Answer 1

您正在使用智能尺寸调整（data-ad-format 属性），您可以控制大体形状...

...通过将 data-ad-format 的值更改为以下值之一： “矩形”、“垂直”、“水平”或这些的任意组合 用逗号分隔，例如“矩形，水平”。

创建自适应广告单元/指定一般形状
https://support.google.com/adsense/answer/3543893

如果您想完全控制高度，则需要删除 data-ad-format 并使用 @media 查询：

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 300px; height: 250px; } }
@media (min-width:800px) { .adslot_1 { min-width: 300px; max-width: 970px; width:100%; height: 90px } }
</style>
<ins class="adsbygoogle adslot_1"
  style="display:inline-block;"
  data-ad-client="ca-pub-1234"
  data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

sn-p 上方是来自page I linked 的“指定可扩展宽度和固定高度”和“指定每个屏幕宽度的精确尺寸”的组合.

如果您想将此单元放在页面顶部，那么我想您应该按照我的建议将.adslot_1 { width: 320px; height: 100px; } 留在代码中，因为：

将 300x250 广告单元放置在经过优化的高端移动设备之上 页面被视为违反政策？

是的，这将被视为违反政策，因为它属于我们的 将内容推送到下方的网站布局的广告展示位置策略 折叠。这种实现会在移动设备上占用太多空间 优化了网站的第一个带有广告的查看屏幕，并提供了一个很差的 给用户的体验。始终尝试考虑用户体验 您的网站 - 这将有助于确保用户继续访问。

AdSense 政策常见问题解答/第 3 部分：移动相关
https://support.google.com/adsense/answer/3394713?hl=en#3

也许您会想看我写的关于使用 AdSense 进行 @media 查询的小教程：

为什么我们不应该对 AdSense ins 标签使用@media 查询
https://productforums.google.com/forum/#!topic/adsense/TiihLH_gMnw

Answer 2

身高问题的答案就在你的问题标题中。

只需给该元素一个唯一的类或 id 名称，如下所示：

<div class="someUnit">
    <!--some codes-->
</div>

并将其添加到您的 css 中：

.someUnit {
    min-height: 90px;
}

---

对于小屏幕问题，请像这样使用media queries：

@media (max-width: 480px) {
    .someUnit {
         width: 300px;
        height: 250px;
    }
}

注意将 480px 替换为您想要更大尺寸的适当屏幕宽度。

Answer 3

删除data-ad-format="auto" 并在样式属性中设置dimensions。