有没有办法在响应式设计中调整 google adsense 的大小？ [关闭]答案

【问题标题】：Is there a way to resize google adsense in a responsive design? [closed]有没有办法在响应式设计中调整 google adsense 的大小？ [关闭]
【发布时间】：2012-08-23 10:11:24
【问题描述】：

我在我的响应式 wordpress 设计中使用 google adsense（使用 twitter 引导程序）。现在，当网站调整大小时，广告会伸出很远，而且看起来很糟糕。

有什么我可以做的吗？实际上，我看到一个网站看起来像是有人在较小的屏幕上调整广告的大小...我不确定这是怎么可能的，因为它是 java 脚本，对吧？

任何反馈都会非常有帮助。谢谢！

【问题讨论】：

根据他们的使用条款，您不得更改广告的显示方式。但是，您可以在页面加载时检查分辨率，并根据尺寸生成不同的广告（这也可以在 resize 上完成，但在这样做之前您可能需要先通读它们的条款，以确保一切正常）。
@bfrohs 嗯..好的。那么这将如何运作呢？假设我的标题中有一个显示 468x60 广告的小部件区域，我会尝试找到一个看起来不错的较小广告并显示它吗？（如果我只在该区域显示图像，它会完美调整大小。）如果是这样，您对如何完成此操作有任何反馈吗？我会在标题区域添加不同的小部件并使用 css 仅在特定时间显示某些小部件吗？
您不能使用 CSS 来隐藏/显示不同的广告，因为这违反了 Google 的广告政策。您必须确定浏览器视口的大小，然后根据视口的大小使用 JavaScript 调用适当的 Google Ad 启动脚本。
@bfrohs 感谢您的反馈。我对此没有任何经验。你知道我是怎么做的吗？
查看我的回答，其中包含有关 ToS 的更新信息，以及此处有关如何获取视口尺寸的问题的链接。从那里开始，它应该只是一个简单的if/else 语句。

标签： css wordpress twitter-bootstrap responsive-design adsense

【解决方案1】：

理想情况下，CSS 媒体查询可以自动缩小广告的尺寸，并且在理想情况下，广告会根据新尺寸自动更改其布局。但是，Google Ads 不支持这一点，甚至也允许这一点——您不得更改广告的内容，也不得隐藏其中的任何部分，除非得到谷歌的明确许可，根据他们的Terms of Service（删除标记为[...]的文本）：

5。 禁止使用。您不得也不得授权或鼓励任何第三方：(i) [...] (ii) 编辑、修改、过滤、截断或更改任何广告、链接、广告单元、搜索结果或推荐按钮中包含的信息的顺序，或删除、隐藏或最小化任何广告、链接、广告单元、搜索结果或推荐按钮以任何方式未经 Google 授权； [...]

另一种解决方案是有条件地通过 JavaScript 提供广告。例如，当页面加载时，retrieve the size of the browser's viewport 并且如果浏览器视口的宽度小于首选广告的宽度，则改为提供较小的广告。它应该类似于 CSS 媒体查询，除了当用户调整浏览器大小时不提供新广告，因为这会产生错误印象（单个页面上的多个印象，不刷新），这是也反对他们的Terms of Service：

5。 禁止使用。您不得也不得授权或鼓励任何第三方：(i) 直接或间接产生查询、推荐事件或印象 或点击任何广告、链接、搜索结果或推荐按钮（包括但不限于点击任何视频广告的“播放”） 通过任何自动、欺骗、欺诈或其他无效手段，包括但不限于通过重复手动点击、使用机器人或其他自动查询工具和/或计算机生成的搜索请求，和/或未经授权使用其他搜索引擎优化服务和/或软件； [...]

【讨论】：

【解决方案2】：

有一个名为 Responsive Adsense 的插件。它添加了一个带有 5 个广告字段的小部件，您可以在其中输入 pub id 和 ad id。然后根据屏幕大小呈现 5 个广告中的 1 个。我在移动浏览器上进行了尝试，它呈现了一个块大小的广告而不是移动广告。

【讨论】：

【解决方案3】：

Google 现在正式支持自适应广告（目前处于测试阶段）。这里有一篇很好的关于功能的文章，并附有 Google 官方文档的链接。

http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

它有效，但一个缺点是当您调整视口大小时，广告不会自动调整大小。据我了解，当视口调整大小时尝试调用广告服务器是违反 TOS 的。

【讨论】：

【解决方案4】：

我同意 Equilibrium3 发布的内容。选择广告尺寸 = 自适应广告单元（测试版）。获得广告代码后，您可以将其放在 <div class="span12"> 中，该 <div class="row"> 也位于其中。这对我放置水平广告并使其居中很有用。

这是我展示横向广告的页面 -> http://www.espaciodigital.mx/

现在，如果您想将广告代码放在侧边栏上，请执行与上述相同的操作，但使用 <div class="span3"> 用于侧边栏，<div class="span9"> 用于页面其余部分来拆分页面。

我在以下页面中这样做了，方形广告在左侧 -> http://www.espaciodigital.mx/quienes_somos.html

在移动设备上看到这两个广告都可以正常工作。试一试。希望对您有所帮助！

【讨论】：

【解决方案5】：

现有答案已过时。谷歌introduced Responsive Ads in July 2013：

新的自适应广告单元可让您支持广泛的使用您的响应式设计网页。您现在可以动态指定将要投放的广告的大小，以适应它以适应您的网站在特定设备上呈现页面的方式。

自适应广告适用于固定、流畅和自适应的布局。您需要做的就是将“Smart Sizing”版本的代码放在您希望广告出现的位置。广告将水平拉伸以占据所有可用空间，并垂直拉伸以显示最佳标准尺寸的广告。如果您的网站根据设备方向更改其布局，则广告将根据设备方向更改事件自动调整大小。使用 CSS 和 HTML5 数据属性可以进行高级定制。

【讨论】：

它是 ONE TIME“响应式”，它在页面加载时工作，但随后更改屏幕尺寸，广告保持相同尺寸并看起来不合适。

【解决方案6】：

为了保持我的页面响应，我这样做了：

<div class="table table-responsive">    
        <div class="text-center text-muted">
            <hr><br>
            <small>advertisement</small>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- bottom -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client=""
                 data-ad-slot=""
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>  
            <br>
        </div>       
</div>

【讨论】：