现在大部分的网页都设计成响应式/自适应网页，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
//当页面加载完成后，依然会触发广告加载

也就是说百度联盟的广告会加载，但不会显示，这样会影响网页速度、还有可能遭到百度联盟判为违规投放。