前端开发经常遇到需要判断用户的浏览设备,是什么手机系统?android,ios,ipad,windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开,等等一系列判断做一些相应的处理。
1,首先判断PC端还是移动端。
1 function IsPC() {
2 var userAgentInfo = navigator.userAgent;
3 var Agents = ["Android", "iPhone",
4 "SymbianOS", "Windows Phone",
5 "iPad", "iPod"];
6 var flag = true;
7 for (var v = 0; v < Agents.length; v++) {
8 if (userAgentInfo.indexOf(Agents[v]) > 0) {
9 flag = false;
10 break;
11 }
12 }
13 return flag;
14 }
2,判断用户移动端使用的系统平台
1 var u = navigator.userAgent;
2 if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
3 //安卓手机
4 } else if (u.indexOf('iPhone') > -1) {
5 //苹果手机
6 } else if (u.indexOf('Windows Phone') > -1) {
7 //winphone手机
8 }
3,判断用户是否在微信中打开
1 function isWeiXin(){
2 var ua = navigator.userAgent.toLowerCase();
3 if(ua.indexOf('micromessenger') != -1) {
4 return true;
5 } else {
6 return false;
7 }
8 }
备注:其实我只需要判断是手机访问时全部隐藏菜单栏就好了。
从大神处发现的其他情况的判断,一起整理下。
判断原理:
1. 第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端
User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。
它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识,用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计;
例如用手机访问谷歌和电脑访问是不一样的,这些是谷歌根据访问者的 UA来判断的。UA可以进行伪装。
浏览器的UA字串的标准格式:浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。
代码如下:
1 2 3 4 5 6 7 |
|
2. 第二种:检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
2.2 使用方法
//判断是否IE内核
if
(browser.versions.trident){ alert(
"is IE"
); }
//判断是否webKit内核
if
(browser.versions.webKit){ alert(
"is webKit"
); }
//判断是否移动端
if
(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert(
"移动端"
); }
2.3 检测浏览器语言
currentLang = navigator.language;
//判断除IE外其他浏览器使用语言
if
(!currentLang){
//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);
3. 判断iPhone|iPad|iPod|iOS|Android客户端
if
(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//判断iPhone|iPad|iPod|iOS
//alert(navigator.userAgent);
window.location.href =
"iPhone.html"
;
}
else
if
(/(Android)/i.test(navigator.userAgent)) {
//判断Android
//alert(navigator.userAgent);
window.location.href =
"Android.html"
;
}
else
{
//pc
window.location.href =
"pc.html"
;
};
4. 判断pc还是移动端
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
5. 常用跳转代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|