js如何判断用户使用的设备类型及平台

前端开发经常遇到需要判断用户的浏览设备，是什么手机系统？android，ios，ipad，windows phone等等，有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开，等等一系列判断做一些相应的处理

一、JS判断浏览器userAgent

User Agent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。

它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；

例如用手机访问谷歌和电脑访问是不一样的，这些是谷歌根据访问者的 UA来判断的。UA可以进行伪装。

浏览器的UA字串的标准格式：浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。

利用navigator.userAgent.toLowerCase()获取浏览器userAgent并转为小写字母。

<script>
iswap();
function iswap() {
    var uA = navigator.userAgent.toLowerCase();
    var ipad = uA.match(/ipad/i) == "ipad";
    var iphone = uA.match(/iphone os/i) == "iphone os";
    var midp = uA.match(/midp/i) == "midp";
    var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var uc = uA.match(/ucweb/i) == "ucweb";
    var android = uA.match(/android/i) == "android";
    var windowsce = uA.match(/windows ce/i) == "windows ce";
    var windowsmd = uA.match(/windows mobile/i) == "windows mobile"; 
    if (!(ipad || iphone || midp || uc7 || uc || android || windowsce || windowsmd)) {
        // PC 端
    }else{
        // 移动端
    }
}
</script>

1，首先判断PC端还是移动端

function IsPC() {
          var userAgentInfo = navigator.userAgent;
          var Agents = ["Android", "iPhone",
                      "SymbianOS", "Windows Phone",
                      "iPad", "iPod"];
          var flag = true;
          for (var v = 0; v < Agents.length; v++) {
              if (userAgentInfo.indexOf(Agents[v]) > 0) {
                 flag = false;
                 break;
             }
         }
         return flag;
     }

2，判断用户移动端使用的系统平台

var u = navigator.userAgent;
     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
         //安卓手机
     } else if (u.indexOf('iPhone') > -1) {
         //苹果手机
     } else if (u.indexOf('Windows Phone') > -1) {
         //winphone手机
     }

3，判断用户是否在微信中打开

function isWeiXin(){ 
         var ua = navigator.userAgent.toLowerCase(); 
         if(ua.indexOf('micromessenger') != -1) { 
             return true; 
         } else { 
             return false; 
         } 
     }

4，JS判断区分区分Android、iphone、ipad：

<script>
var ua = navigator.userAgent.toLowerCase();
if (/android|adr/gi.test(ua)) {
    // 安卓  
} else if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)) {
    //苹果  
} else if (/iPad/gi.test(ua)) {
    //ipad  
}
</script>

5，JS区分判断访客的浏览器

<script>
var ua = navigator.userAgent.toLowerCase();
if (/msie/i.test(ua) && !/opera/.test(ua)) {
    alert("IE");
    return;
} else if (/firefox/i.test(ua)) {
    alert("Firefox");
    return;
} else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
    alert("Chrome");
    return;
} else if (/opera/i.test(ua)) {
    alert("Opera");
    return;
} else if (/iPad/i) {
    alert("ipad");
    return;
}
if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {
    alert("Safari");
    return;
} else {
    alert("unKnow");
}   
</script>

二、js判断浏览器宽度区分设备

我们可以利用JS代码，来判断访问者设备屏幕的宽度的大小来确定访客的设备是否为移动设备。

window.screen.availWidth：用来获取浏览器屏幕的宽度。

window.screen.availHeight：用来获取浏览器屏幕的高度。

<script>
if(window.screen.availWidth<768){
    //移动端
}else{
    //PC端
}
</script>

三、拓展

//1.判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }

//2.判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }

//3.判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }

//4.检测语言
currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);

//5.判断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";
};