项目中碰到前端某个页面提供APP的不同设备版本下载，需要在用户打开的时候识别用户设备并跳转到对应的选项卡，Js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
  // 判断不同设备的方法
  var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
  var isAndroid = /(Android)/i.test(navigator.userAgent);
  var isWin = /(win32|win64)/i.test(navigator.userAgent);
  var isIos = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
  if(isWin) {
    // 通过id获取标签
    var twin = document.getElementById("tab_windows");
    var pwin = document.getElementById("pill_windows");
    // 为该标签添加class类名
    twin.classList.add("active");
    pwin.classList.add("active");
  }else if(isAndroid) {
    var tand = document.getElementById("tab_android");
    var pand = document.getElementById("pill_android");
    tand.classList.add("active");
    pand.classList.add("active");
  }else if(isIos) {
    var tios = document.getElementById("tab_ios");
    var pios = document.getElementById("pill_ios");
    tios.classList.add("active");
    pios.classList.add("active");
  }else if(isMac) {
    var tmac = document.getElementById("tab_macos");
    var pmac = document.getElementById("pill_macos");
    tmac.classList.add("active");
    pmac.classList.add("active");
  }else {
    var twin = document.getElementById("tab_windows");
    var pwin = document.getElementById("pill_windows");
    twin.classList.add("active");
    pwin.classList.add("active");
  }
</script>

参考：