根据访问设备自动识别展示手机站或PC站的方法

随着移动互联网时代的到来，相信很多站长都在想办法把自己的网站做成手机与电脑通用的网站，如何让网站自动识别手机端与PC端是各位站长一直困惑的问题。

很多人都想实现这样一个功能：在电脑上输入域名访问的是PC端的网站，而在手机或者平板电脑等移动设备上输入域名是访问的一个手机网站，而且PC端网站和手机移动端的网站是不一样的，当然手机移动端的网站是简化的，和微信的微网站一样的，很简洁的。

比如：我的网站已经建好了，现在又建了一个手机网站，怎么才能访问同一个域名下让网站自动识别设备，比方说用电脑上进入官网，用移动设备自动进入手机站点，这样就实现了，手机网站和PC网站使用同一个域名，不同的设备访问的时候，看到的是各自的网站。

1、在网站head标签里加跳转语句

要实现网站根据访问设备自动识别展示手机站或PC站这个功能，需要以下几个步骤：

（1）、你得有一个PC端，在电脑上访问的官方网站，比如：www.mahaixiang.cn。

（2）、你需要重新制作一个移动端的手机网站（具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍），比如：m.mahaixiang.cn。

（3）、在PC端的网站上加上一段代码，每个页面都需要加上，放在PC端网站head标签里面，代码如下：

//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf(“Win”) == 0;
system.mac = p.indexOf(“Mac”) == 0;
system.x11 = (p == “X11″) || (p.indexOf(“Linux”) == 0);
//跳转语句
if (!(system.win || system.mac || system.xll)) {//转向电脑界面
window.location.href = “http://m.mahaixiang.cn”;
}

（4）、进入域名解析系统，做一个别名cname解析，比如：你手机网站制作公司给的地址123.域名.com解析到m.mahaixiang.cn域名解析系统。

2、根据移动终端和浏览器版本信息判定的语法

还有一些站长或SEO可能会考虑到移动终端的版本和浏览器版本信息，对此，马海祥也为大家整理了一段比较有效的代码，如下所示：

<script type="text/javascript">
 var browser={
    versions:function(){
           var u = navigator.userAgent, app = navigator.appVersion;
           return {//移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || (u.indexOf('Mac') > -1 && u.indexOf('Macintosh') < 0), //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
         }(),
         language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad) {
 self.location=http://www.mahaixiang.cn;
}
</script>

3、自动识别手机页面、iPad页面和wap页面

可以根据不同的终端类型适当的改变正则表达式，这段代码添加到需要识别的网页，会根据客户端的类型自动跳转到手机页、平板页或其他移动设备页面，非常的灵活！

<script type="text/javascript">
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    if(window.location.href.indexOf("?mobile")<0){
        try{
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                window.location.href="http://www.mahaixiang.cn/m";
            }else if(/iPad/i.test(navigator.userAgent)){
                window.location.href="http://www.mahaixiang.cn/pad";
            }else{
                window.location.href="http://www.mahaixiang.cn/wap"
            }
        }catch(e){}
    }
}
</script>

4、使用PHP语言来识别

对于一些精通PHP语言的博友来说，也可以通过PHP语法来实现，比如以下的写法：

//设定Mobile的定义
$mobileAgent = array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
//读取用户的浏览器资料
$browser = $_SERVER['HTTP_USER_AGENT'];
$isMobile = false;
//检查开始
foreach($mobileAgent as $search){
    if(stristr($browser,$search)!=false){
        $isMobile = true;
        //echo $search;
        //程式码(转址)
        header("Location: http://www.mahaixiang.cn/m/index.html");
        //停止运行程序
        exit;
    }
}
?>

5、做个自动识别的效果

经过多次测试，我们也可以做个自动识别的效果，方法很简单，在你需要自动跳转的页面加入以下代码：

<script type="text/javascript">
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
//alert(mobileAgent[i]);
location.href = 'http://siteapp.baidu.com/webapp/mahaixiang.cn#m/http://mahaixiang.cn/';
break; } }
</script>

6、自动识别移动端适配跳转网址的代码

手机版的网站需要简单，以文字为主，才能很好的兼容，可以在网站的首页设置一个程序来判断用户是手机端还是电脑，如果是手机端，直接中转到手机端，如果是电脑端，直接中转到电脑端（大家也可以使用百度提高的百度移动搜索开放适配服务，具体可查看马海祥博客《百度移动搜索开放适配服务的3种方法》的相关介绍）。

对此，大家可以在网站的首页插入入下代码：

<script type="text/javascript">　　
function browserRedirect() {　　
var sUserAgent = navigator.userAgent.toLowerCase();　　
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";　　
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";　　
var bIsMidp = sUserAgent.match(/midp/i) == "midp";　　
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";　　
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";　　
var bIsAndroid = sUserAgent.match(/android/i) == "android";　　
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";　　
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";　　
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){　　
window.location.href=B页面;　
}
}　
browserRedirect();　
</script>
<script type="text/javascript">uaredirect("<A href='http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");
</script>

在马海祥看来，PC版网页自动识别手机客户端并跳转，用js进行判断是否手机客户端进行跳转最好，特别是静态网页，把这个过程通过js的方式放在用户客户端执行，可以大大减少服务器端额外处理的压力，但是有时需要通过在服务器端进行判断的情况除外。

马海祥博客点评：

随着移动互联网的降临，移动网站已经一发不可收拾，PC端和移动端官网并存也逐渐成为一大趋势，提前为自己的网站设置好自动识别，无论是从SEO的角度或者用户体验的角度，都有很大的好处。