利用Write()和userAgent解决自适应网站CDN后不能识别移动端的问题

自适应网站的好处是可以不用为移动端和 PC 端设置不同的内容，一个网页全部搞定。这是自适应网站的好处。但是，当你使用 CDN 加速以后问题就来了，如果你 html 网页也静态加速了，那么你投放到网站上的广告代码可能分不清移动端和 PC 端了，有时候你用手机或 Pad 看到的是针对电脑设置的广告，而有时候你打开电脑网页，看到的却为针对移动端设置的广告，不仅影响广告的投放效果，而且会造成网页布局、排版混乱。

既然后端问题变成了前端问题，我们就需要在前端进行解决，需要通过 html 和 JavaScript 代码来解决。我们需要用网页代码对浏览器进行判别，通过 user-agent 实现对移动端投放针对移动端的广告代码。所以我们需要用到 Navigator 对象的 userAgent 属性。其中，Navigator 对象包含有关浏览器的信息，所有浏览器都支持该对象。而 userAgent 则是返回由客户机发送服务器的 user-agent 头部的值。如何判断呢？我们需要读取浏览器中的 user-agent 信息，然后进行比对，这时需要用到 JavaScript 中的 match() 函数。match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。具体解释可以在网上搜一下，这里就不再解释。

能正确判断浏览器后，需要把广告代码投放到网页，如何实现？百度广告管家里面有一段明确的叙述：

在 JS 文件中，例如1.js，使用 document.write() 方法写入广告位代码。一个 JS 只能调一段代码。
方法一：
document.write('<script >BAIDU_CLB_SLOT_ID = "1";</script>');
document.write('<script src="http://drmcmm.baidu.com/js/o.js"></script>');
本文禁止住转载。任何形式转载请联系作者（时光在路上ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
方法二：
document.writeln("<script type=\"text\/javascript\" >BAIDU_CLB_SLOT_ID = \"1\";<\/script>");
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/cbjs.baidu.com\/js\/o.js\"><\/script>")
本文禁止住转载。任何形式转载请联系作者（时光在路上ｗｗｗ．ｔｉｍｅｚｌｓ．ｃｏｍ）。时光在路上保留所有权利
在页面上广告位的位置，引用该JS文件，例如：
<script src="1.js"></script>

原来可以通过 HTML DOM write() 方法向文档写入 HTML 表达式或 JavaScript 代码的。注意：writeln()与write() 唯一不同之处在于 writeln() 未尾加了一个换符。

所有的必要函数都准备好了，我们可以写代码投放了。

举例1：

你有针对移动端的广告代码：

<script src="http://WAP.com/baidustatic.com/cpro/ui/cm.js"></script>

和针对 PC 端的广告代码：

<script src="http://PC.com/cpro/ui/cm.js"></script>

可以写成如下形式：

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { // 从浏览器的 UA 判断是否是移动端
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/WAP.com\/baidustatic.com\/cpro\/ui\/cm.js\"><\/script>"); // 投放到移动端
} else { // 投放到 PC 端
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/PC.com\/cpro\/ui\/cm.js\"><\/script>");
}

举例2：

你有针对移动端的广告代码：

<script>var cpro_id = "u1234567";</script>
<script src="http://WAP.com/baidustatic.com/cpro/ui/cm.js"></script>

和针对 PC 端的广告代码：

<script>var cpro_psid = "u7654321";var cpro_psheight = 250;var cpro_pswidth = 1000;</script>
<script src="http://PC.com/cpro/ui/cm.js"></script>

可以写成如下形式：

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { // 从浏览器的 UA 判断是否是移动端
document.writeln("<script type=\"text\/javascript\">var cpro_id = \"u1234567\";<\/script>"); // 投放到移动端
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/WAP.com\/baidustatic.com\/cpro\/ui\/cm.js\"><\/script>");
} else { // 投放到 PC 端
document.writeln("<script type=\"text\/javascript\">var cpro_psid = \"u7654321\";var cpro_psheight = 250;var cpro_pswidth = 1000;<\/script>");
document.writeln("<script type=\"text\/javascript\" src=\"http:\/\/PC.com\/cpro\/ui\/cm.js\"><\/script>");
}

将以上代码贴到 PHP 文件中即可。

注意：如果你通过 WordPress 后台控制面板投放上述代码，里面的字符会被转义，\ 根本不会起到作用，而且输出到页面的代码显示错误。所以一定要贴到 PHP 文件之中。

如果你想进一步结合屏幕尺寸调控代码输出，可以使用 HTML DOM innerheight、innerwidth 属性 添加尺寸限制。这里就不再赘述了。