在移动端响应式布局开发过程中，我们经常会遇到：一套项目既要在PC端浏览器上访问，也要在移动端设备的浏览器上访问。目前处理这样的需求有两套解决方案：

1、PC端和移动端共用一套项目

这样的解决方案目前也经常出现，但是前提条件是页面的布局结构相对来说比较的简单，这样即使移动端屏幕比较的窄，我们可以通过类似于把PC端的三列布局改为一列布局的方案或者是宽高自适应缩放等，实现响应式布局的开发。例如：华为官网、猎豹移动都是这样实现的。

2、PC端和移动端使用不同两套项目

第一种解决方案虽然解决了我们的需求，但是一旦页面的结构相对来说复杂一些，我们在进行HTML的排版布局调整，一方面会加大工作量，另外一方面最终排版完成的页面也不方便用户的阅读使用。所以，目前大部分的公司都是PC端单独按照一套排版来做，移动端也会单独的设计一套更符合用户阅读的排版。例如：京东、QQ新闻、淘宝等都是这样处理的。

但是不管是那一套方案，很多时候都需要我们检测出当前页面运行的环境是PC端的浏览器还是移动端的浏览器，尤其是第二套方案，我们要避免用户在PC端打开移动端项目地址，也要避免用户在移动端打开PC端的项目地址，所以检测到底是什么平台环境下的浏览器至关重要。

下面给大家分享的这段代码来自于腾讯新闻部门，他们的团队自己用多台手机进行测试，最终总结出一套相对比较完善的检测代码：

假设珠峰培训的PC端项目地址：http://www.zhufengpeixun.cn/ 移动端项目地址：http://phone.zhufengpeixun.cn/

     ~function () {         var reg1 = /AppleWebKit.*Mobile/i,             reg2 = /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/;          //->条件成立说明当前页面是运行在移动端设备中的         if (reg1.test(navigator.userAgent) || reg2.test(navigator.userAgent)) {              //->如果当前页面的URL是PC端项目的地址:我们需要跳转到移动端项目             if (window.location.href.indexOf("www.zhufengpeixun.cn") >= 0) {                 window.location.href = "http://phone.zhufengpeixun.cn/";             }             return;         }          //->反之则说明当前的页面是运行在PC端设备中的,如果访问的URL地址是移动端的,我们需要跳转到PC端地址上         if (window.location.href.indexOf("phone.zhufengpeixun.cn") >= 0) {             window.location.href = "http://www.zhufengpeixun.cn/";         }     }(); 

还可以在上述代码的移动端设备中具体的在细分是手机还是PAD，根据需求可以自己选择增加。

     ~function () {         var reg1 = /AppleWebKit.*Mobile/i,             reg2 = /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/;         if (reg1.test(navigator.userAgent) || reg2.test(navigator.userAgent)) {             if (/iPad/i.test(navigator.userAgent)) {                 //->说明是PAD             } else {                 //->说明是手机             }         }     }(); 

注:以上JS代码应该在JS一加载就开始检测，所以放在头部的HEAD区域。