Question

我在我的响应式wordpress设计中使用了谷歌的adsense（使用的是Twitter引导程序。）现在，当网站调整大小时，广告很远，看起来很糟糕。

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

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

Answer 1

理想情况下，CSS媒体查询可以自动缩放广告，并且在完美的世界中，广告会根据新尺寸自动更改其布局。但是，Google广告不支持此功能，甚至不允许这一点 - 您不得更改广告内容，也不得隐藏广告的任何部分，除非获得Google的明确许可，否则根据他们的Terms of Service（已删除的标有[...]的文字）：

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

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

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

Answer 2

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

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

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

Answer 3

Google现在正式支持自适应广告（目前在BETA中）。这里有一个很好的功能，包括官方Google文档的链接。

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

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

Answer 4

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

Answer 5

我同意Equilibrium3发布的内容。选择广告尺寸=响应广告单元（测试版）。获得广告代码后，您可以将其放在<div class="span12">内<div class="row">内。这对我来说是有用的，可以放置一个横向广告并让它居中。

这是我有水平广告的页面 - ＆gt; http://www.espaciodigital.mx/

现在，如果您要将广告代码放在侧边栏上，请执行与上面相同的操作，但是使用（例如）<div class="span3">侧边栏和<div class="span9">来分割页面。页面。

我在下一页中做了这个，广告广告位于左侧 - ＆gt; http://www.espaciodigital.mx/quienes_somos.html

在移动设备中看到这两种广告都能正常运作。试试看。希望有所帮助！

Answer 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>

有没有办法在响应式设计中调整google adsense的大小？

6 个答案: