网站设备识别与跳转：实现PC站与手机站自动切换的5种方法

网站设备识别与跳转：实现PC站与手机站自动切换的5种方法

随着移动互联网的普及，越来越多的网站需要适配不同设备。本文将详细介绍如何实现网站根据访问设备自动识别并跳转到手机站或PC站的方法，包括在head标签中添加跳转语句、根据移动终端和浏览器版本信息判定、使用PHP语言识别等。

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

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

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

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

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

（2）、你需要重新制作一个移动端的手机网站，比如：m.abc.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.abc.cn";  
}  

（4）、进入域名解析系统，做一个别名cname解析，比如：你手机网站建设公司给的地址123.域名.com解析到m.abc.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.abc.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.abc.cn/m";  
}else if(/iPad/i.test(navigator.userAgent)){  
window.location.href="http://www.abc.cn/pad";  
}else{  
window.location.href="http://www.abc.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.abc.cn/m/index.html");  
//停止运行程序  
exit;  
}  
}  
?>

5. 自动识别移动端适配跳转网址的代码

手机版的网站需要简单，以文字为主，才能很好的兼容，可以在网站的首页设置一个程序来判断用户是手机端还是电脑，如果是手机端，直接中转到手机端，如果是电脑端，直接中转到电脑端。

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

<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.abc.cn/wap/","http://www.abc.cn/index.html");http://www.abc.cn/wap/","http://www.abc.cn/index.html");  
</script>  

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