navigator.userAgent.toLowerCase区分设备，浏览器_navigator.useragent.tolowercase()

在跨平台、浏览器、移动设备兼容的时候，需要根据设备、浏览器做特定调整，所以我们经常会用到navigator.userAgent.toLowerCase()来进行判断

navigator.userAgent.toLowerCase(）

1. navigator是HTML中的内置对象：包含浏览器的信息；
2. userAgent是navigator的属性方法：可以返回由客户机发送服务器的头部的值，作用其实就是就是返回当前用户所使用的是什么浏览器；
3. toLowerCase是转换为小写；

区分设备是pc还是移动端

 function _isMobile () {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return flag
}

if(_isMobile()) {
 alert("手机端");
 this.$router.replace('/m_index');
} else {
 alert("pc端");
 this.$router.replace('/pc_index');
}
1
2
3
4
5
6
7
8
9
10
11
12

在确认是移动端的基础上，判断是Android、ipad、iphone

var ua = navigator.userAgent.toLowerCase();
console.log(ua,'ua')
if (/android|adr/gi.test(ua)) {
    alert("安卓");
}else if(/iPad/gi.test(ua) ){
     alert("ipad");
}else if(/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)){
     alert("苹果");
}
1
2
3
4
5
6
7
8
9

内置的浏览器，比如新浪微博、腾讯QQ（非QQ浏览器）和微信

var ua = navigator.userAgent.toLowerCase();  
if(ua.match(/weibo/i) == "weibo"){  
    console.log('新浪微博');
}else if(ua.indexOf('qq/')!= -1){  
    console.log('QQ客户端');
}else if(ua.match(/MicroMessenger/i)=="micromessenger"){ 
 	console.log('微信'); 
	var v_weixin = ua.split('micromessenger')[1];  
	    v_weixin = v_weixin.substring(1,6);  
	    v_weixin = v_weixin.split(' ')[0];  
	if(v_weixin.split('.').length == 2){  
	    v_weixin = v_weixin + '.0';  
	}  
	if(v_weixin < '6.0.2'){  
	    console.log('微信低于6.0.2版本');
	}else{  
	    console.log('微信高于6.0.2版本');  
	}  
}else{  
    console.log('其他'); 
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21