现在大部分的网页都设计成响应式/自适应网页，Wordpress的主题最流行的就是响应式布局了。然而令很多网页开发者苦恼的是页面上的广告如何也能自适应呢，本文将详细介绍网页上投放百度联盟与Google AdSense广告，实现广告自适应加载（无插件）的方法。
一、PHP方法（仅支持Wordpress网站）
WordPress有很多的自带函数，其中就有一个wp_is_mobile() 函数，该函数的作用是测试当前浏览器是否在移动设备（智能手机，平板电脑等）上运行。
wp_is_mobile() 返回值为布尔型。
下面我们来看一个实例：
<?php if ( wp_is_mobile() ) : ?> /* 如果是移动设备，请将要显示的代码插入到本行的下方 */ <?php else : ?> /* 如果是桌面设备，请将要显示的代码插入到本行的下方 */ <?php endif; ?>wp_is_mobile() 使用起来是不是特别简单？但它有以下弊端：
- 非Wordpress网站或不是Wordpress生成的网页无法使用。
- 网站页面使用了CDN静态缓存，判断会失效。
- WordPress使用了WP Super Cache或W3 Total Cache等缓存插件后，虽可以开启移动设备与桌面采用不同的缓存来解决上面的问题，但会额外耗费资源，特别是当大量网页需要缓存的时候，会造成所需存储空间翻倍，而且每次访问都需要经过额外的判断，影响页面加载时间。
怎么做才是最完美的解决方案？请往下阅读。
二、JavaScript方法（推荐）
这种方法支持所有网站的网页，并不限于Wordpress。
1、百度联盟广告自适应实例
当桌面浏览时加载广告，移动设备浏览时不加载广告。
/* 百度联盟广告自适应：当浏览器可见区域宽度大于768像素时加载广告，否则不加载 原文链接：https://www.zhanzhangb.com/407.html */ <script> if (768 < document.documentElement.clientWidth) { document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */ (window.slotbydup = window.slotbydup || []).push({ id: "u8888888", /* 将u8888888修改为正确的id */ container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */ async: true }); } </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" > </script>另一种情况是，当桌面浏览时加载固定尺寸广告，当移动设备浏览时加载百度联盟的移动广告：
/* 百度联盟广告自适应：当浏览器可见区域宽度大于768像素时加载固定尺寸广告，否则加载移动广告 原文链接：https://www.zhanzhangb.com/407.html */ <script> if (768 < document.documentElement.clientWidth) { document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */ (window.slotbydup = window.slotbydup || []).push({ id: "u8888888", /* 将u8888888修改为正确的id */ container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */ async: true }); }else { /* 以下是移动广告的相关代码 */ document.writeln("<div class=\"_5absc18f9d6\"></div>"); /* 将_30bsg7808bf修改为你自己的移动广告的类名 */ (window.slotbydup = window.slotbydup || []).push({ id: "u9999999", /* 将u9999999修改为你自己的移动广告的id */ container: "_5absc18f9d6", /* 将_5absc18f9d6修改为你自己的移动广告的类名 */ async: true }); } </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" > </script>当桌面浏览时加载百度联盟固定尺寸广告，当移动设备浏览时加载 Google AdSense的自适应广告：
/* 广告自适应：当浏览器可见区域宽度大于768像素时加载百度联盟广告，否则加载Google AdSense自适应广告 原文链接：https://www.zhanzhangb.com/407.html */ <script> if (768 < document.documentElement.clientWidth) { document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */ (window.slotbydup = window.slotbydup || []).push({ id: "u8888888", /* 将u8888888修改为正确的id */ container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */ async: true }); document.writeln("<script type=\"text/javascript\" src=\"//cpro.baidustatic.com/cpro/ui/c.js\" async=\"async\" defer=\"defer\" >"); /* 加载百度联盟JS脚本 */ }else { /* 以下是Google AdSense自适应广告的相关代码 */ document.writeln("<ins class=\"adsbygoogle\""); document.writeln("style=\"display:block\""); document.writeln("data-ad-client=\"ca-pub-4026513110826579\""); /* 将ca-pub-4026513110826579修改为自己的发布商ID */ document.writeln("data-ad-slot=\"7266153905\""); /* 将7266153905修改为自己的广告ID */ document.writeln("data-ad-format=\"auto\""); /* data-ad-format 参数的值：auto完全自适应、rectangle矩形、vertical垂直、horizontal横幅 */ document.writeln("data-full-width-responsive=\"true\"></ins>"); /* true会完全占据屏幕宽度，false会留出边距 */ (adsbygoogle = window.adsbygoogle || []).push({}); document.writeln("<script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>"); /* 加载Google AdSense JS脚本 */ } </script>以上代码均通过测试并得到官方认可，绝无广告违规投放的风险，其中document.documentElement.clientWidth为获取浏览器的 可见区域宽度，兼容IE、FireFox、Chromium（Chrome的内核）、Webkit（Safari的内核）等所有浏览器（目前未发现不支持document.documentElement.clientWidth的浏览器 ）。
网上还有另外的方式，其原理是将HTML元素的display属性改为”none”，从而达到不显示相应内容的效果。但对于联盟广告用户来说，这个不是一个最佳的方案。请看以下示例：
原文链接：https://www.zhanzhangb.com/407.html <script> function zzb_ads_none(){ document.getElementById("_30bsg7808bf").style.display="none"; }; if (768 > document.documentElement.clientWidth) { zzb_ads_none(); } </script>其中”_30bsg7808bf”是百度联盟的广告类，这样是可以屏蔽广告展示，但问题在于以下代码依然会触发：
(window.slotbydup = window.slotbydup || []).push //当页面加载完成后，依然会触发广告加载也就是说百度联盟的广告会加载，但不会显示，这样会影响网页速度、还有可能遭到百度联盟判为违规投放。
声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：ceo@zunw.cn，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
