怎么让网站自动识别设备，自动跳转wap页面

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

武汉肥猫科技
2017-01-16 · 武汉肥猫科技提供高端网站建设、SEO等服务

武汉肥猫科技

武汉肥猫网络科技有限公司，是一家集策划、设计、技术开发于一体的专业互联网产品服务公司，致力于为企业信息化提供驱动力。

向TA提问

关注

展开全部

自动识别跳转，主要有以下几种方法可以尝试：

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

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

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

（2）、你需要重新制作一个移动端的手机网站，比如：m.baidu.com。

（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.baidu.com”;

}

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

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

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

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.baidu.com;

}

</script>

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

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

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.baidu.com/m";

}else if(/iPad/i.test(navigator.userAgent)){

window.location.href="http://www.baidu.com/pad";

}else{

window.location.href="http://www.baidu.com/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.baidu.com/m/index.html");

//停止运行程序

exit;

}

5、做个自动识别的效果

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

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、自动识别移动端适配跳转网址的代码

手机版的网站需要简单，以文字为主，才能很好的兼容，可以在网站的首页设置一个程序来判断用户是手机端还是电脑，如果是手机端，直接中转到手机端，如果是电脑端，直接中转到电脑端（大家也可以使用百度提高的百度移动搜索开放适配服务。

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

function browserRedirect() {　　

var sUserAgent = navigator.userAgent.toLowerCase();　　