威武影院 - 热搜 - 正文

实现Google AdSense广告自适应设计

2019-05-20 10:53月光博客

  早先我们在《自适应网页设计的方法》一文中说明了网站自适应的修改方法,今天我们将着重讨论Google AdSense广告的自适应设计方法。

  所谓自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,基本上对于双栏网站来说修改最简便,只要在HTML头部增加viewport标签,在CSS文件尾部增加针对不同屏幕分辨率的规则,布局宽度使用相对宽度,隐藏侧栏,半小时就能提升网站的手机移动浏览体验。

  但是网站修改完成后,我们会发现原先的Google AdSense广告单元并没有实现自适应,浏览体验并不好,实际上,只要简单的几步操作,就能让Google AdSense广告实现自适应设计。

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

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

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

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

  原有的示例代码:

<ins class="adsbygoogle"
     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 class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"
     data-ad-format="auto"></ins>



编辑:陈红

版权与免责声明:

凡未注明"稿件来源"的内容均为转载稿,本网转载出于传递更多信息的目的;如转载稿涉及版权问题,请作者联系我们,同时对于用户评论等信息,本网并不意味着赞同其观点或证实其内容的真实性;


本文地址:http://www.zgyqzx.net/news/2019/05/20/647822.html

转载本站原创文章请注明来源:威武影院

点击排行
焦点

看上去很火的短视频,对创业者却是个无底洞

  美国杂志《名利场》曾经针对“青少年喜爱的明星”做过一次调 ...详情

Win10系统的便签(便利贴)在哪?

Win10系统更新成2016年周年 版,版本编号1607,。 ...详情

19999元!“小米”自行车来了 史上最贵

啄木网-青岛IT(www.zomiu.com):19999元 ...详情

2月流失20万玩家 绝地求生真的要凉了吗?

《绝地求生》自发布以来可以说是一路飙升,玩家数量每月都有很明 ...详情

万字干货总结:最全的运营数据指标解读

用户获取是运营的起始,用户获取接近线性思维,或者说是一个固定 ...详情

CopyRight ? 2019 威武影院 www.zgyqzx.net, All Rights Reserved 一尘网 版权所有

使用一尘网前必读 | 关于我们 | 免责声明 | 隐私政策 | 威武影院 | 联系我们