如何让Google AdSense广告根据设备屏幕宽度实现自适应调整

如何让Google AdSense广告根据设备屏幕宽度实现自适应调整

只要简单的几步操作,就能让Google AdSense广告实现自适应设计。

最简单的方法是新建一个广告单元,在“广告尺寸”里选择“自适应广告单元”即可,如下图所示,这个我们就不多讨论。

实现Google AdSense广告自适应设计

现在主要讨论一下原有的旧广告单元如何实现自适应设计

首先,如果原有的Google AdSense广告代码类型为“同步”,则必须先将代码修改为“异步”代码,登录Google AdSense后台,在相应的广告单元里,点击“获取代码”,目前默认的代码就是异步代码。

之后,我们需要对代码进行一些修改,修改的方法有两种:

原有的示例代码:

<ins
style=”display:inline-block;width:300px;height:250px”
data-ad-client=”ca-pub-00000″
data-ad-slot=”00000″></ins>

方法1:智能调整尺寸

将中间一行ins代码里的style=”display:inline-block;width:300px;height:250px”替换为style=”display:block”,并在后面增加data-ad-format=”auto”这个属性。

修改后的代码变为:

<ins
style=”display:block”
data-ad-client=”ca-pub-00000″
data-ad-slot=”00000″
data-ad-format=”auto”></ins>

方法2:高级调整尺寸

在整段代码前增加<style>样式内容,针对不同分辨率的屏幕展示不同尺寸的广告。

修改后的代码变为:

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

<ins  class=”adsbygoogle my_adslot”

style=”display:inline-block”
data-ad-client=”ca-pub-00000″
data-ad-slot=”00000″></ins>

上面两种方法都可以,建议用方法1,简单易用。

经过这样的修改,原有的Google AdSense广告单元即可实现自适应网页设计,AdSense广告内容也可以正常在手机上展示了。

有些用户可能会疑虑,这种方法修改了Google Adsense的广告代码是否符合Google的政策,根据Google AdSense的官方网页介绍,如上的自适应设计的代码修改是可以接受的修改,因此与网站相适宜的广告修改并不违反Google AdSense的政策。

发表评论