js 识别用户PC端或移动端
如果需要对移动终端进行优化，必须要做的就是，判断客户机的访问设备是什么。
通过判断的结果，返回不能的域名地址，继而加载不同的CSS文件。
我们使用的判断方式是通过user-agent值，来进行判断。使用javascript框架中的Navigator对象的userAgent属性。navigator 对象没有公开标准，不过现在市面上所有浏览器都支持该对象。使用userAgent属性返回由客户机发送服务器的 user-agent 头部的值。头信息中有一个 User-Agent，它的作用是告诉服务器，用户客户端是什么浏览器，以及操作系统的信息的。使用正则表达式进行user-agent值的获取。和本地的值进行判断，这个匹配值可以是移动操作系统例如Android,ios，也可以为浏览器的名称。有匹配项则跳转，否则则不会跳转，直接进入PC端首页。
具体的代码实现，我们为了提高网站的可移植性，使用了JavaScript脚本语言。使用此技术的好处在笔者看来有两点
1：可以提高网站的可移植性，如果在此后的Web项目中，我们团队需要再一次加入移动终端的效果，就可以很轻松的引入这部分的JS代码，进行判断。提高以后的工作效率。
2：第二点是便于Web程序可以在不用的界面加载，是否引入这部分移动终端的判断代码。
具体实现：
我们把判断访问的脚本抽离，如果哪个页面需要进行客户终端的判断，我们就直接在页面使用<script></script>引入脚本程序，具体判断代码如下：
function uaredirect(f) {
try{
if(document.getElementById("bdmark")!=null){
return
}
var b=false;
if(arguments[1]) {
var e=window.location.host;
var a=window.location.href;
if(isSubdomain(arguments[1],e)==1) {
f = f + "/#m/"+a;
b=true
} else {
if(isSubdomain(arguments[1],e)==2){
f = f + "/#m/"+a;
b=true
} else{
f=a;b=false
}
}
} else{
b=true
}
if(b){
var c=window.location.hash;
if(!c.match("fromapp")){
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|Windows Phone)/i))){
location.replace(f)
}
}
}
}catch(d) {
alert("some except");
}
}
js 判断是否移动设备
我想让所有进入我网站的人，如果是移动设备。则进入我的博客移动站： m.shanmao.me
具体代码如下：
/*
智能机浏览器版本信息:
*/
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, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: "+browser.language);
document.writeln(" 是否为移动终端: "+browser.versions.mobile);
document.writeln(" ios终端: "+browser.versions.ios);
document.writeln(" android终端: "+browser.versions.android);
document.writeln(" 是否为iPhone: "+browser.versions.iPhone);
document.writeln(" 是否iPad: "+browser.versions.iPad);
document.writeln(navigator.userAgent);
if( browser.versions.android || browser.versions.iPhone || browser.versions.iPad){
window.location.href="http://m.shanmao.me"
}else{
alert("不是移动设备");
}
这里要注意：
browser.versions.mobile || browser.versions.ios
我原先加上了上面这两个，可是发现谷歌浏览器是支持 browser.versions.mobile的。
我的谷歌浏览器输出：Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
目测应该是后面的这个 ：!!u.match(/AppleWebKit/)匹配了。
由于我没很大需求。所以没纠结,如果你要纠结。你还可以用js判断移动终端宽度大小，然后再跳转。
所以我删了这2两个。我用iphone测试。成功了。反问我的网站直接跳转到移动站点。不过现在都是跳转到首页。我可以获取当前页面URL后跳转到对应的移动站点页面！
参考推荐：
re正则表达式、BeautifulSoup、lxml 性能对比
版权所有: 本文系米扑博客原创、转载、摘录，或修订后发表，最后更新于 2019-01-03 12:41:10
侵权处理: 本个人博客，不盈利，若侵犯了您的作品权，请联系博主删除，莫恶意，索钱财，感谢！
转载注明: js 识别用户PC端或移动端 （米扑博客）