判断设备工具函数

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

判断浏览器userAgent等工具函数

判断userAgent

摘自：你真的理解userAgent了吗 - 腾讯AlloyTeam

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
export function getBrowser() {
  const { userAgent } = navigator;
  const rMsie = /(msie\s|trident.*rv:)([\w.]+)/;
  const rEdge = /(edge)\/([\w.]+)/;
  const rFirefox = /(firefox)\/([\w.]+)/;
  const rOpera = /(opera).+version\/([\w.]+)/;
  const rChrome = /(chrome)\/([\w.]+)/;
  const rSafari = /version\/([\w.]+).*(safari)/;
  let browser = "other";
  let version = "0";
  let brand = "other";
  const ua = userAgent.toLowerCase();
  const { vendor } = navigator;
  function uaMatch(ua: string) {
    let match = rMsie.exec(ua);
    if (match != null) {
      return { browser: "ie", version: match[2] || "0" };
    }
    match = rEdge.exec(ua);
    if (match != null) {
      return { browser: "edge", version: match[2] || "0" };
    }
    match = rChrome.exec(ua);
    if (match != null && /Google/.test(vendor)) {
      return { browser: match[1] || "", version: match[2] || "0" };
    }
    match = rSafari.exec(ua);
    if (match != null && /Apple Computer/.test(vendor)) {
      return { browser: match[2] || "", version: match[1] || "0" };
    }
    match = rFirefox.exec(ua);
    if (match != null) {
      return { browser: match[1] || "", version: match[2] || "0" };
    }
    match = rOpera.exec(ua);
    if (match != null) {
      return { browser: match[1] || "", version: match[2] || "0" };
    }
    return { browser: "other", version: "0" };
  }

  try {
    const browserMatch = uaMatch(ua);
    ({ browser, version } = browserMatch);

    if (/qqbrowser/.test(ua)) {
      brand = "qq";
    } else if (/se/.test(ua) && /metasr/.test(ua)) {
      brand = "sougou";
    } else if (/360se/.test(ua)) {
      brand = "360";
    } else if (/ucweb/.test(ua)) {
      brand = "uc";
    } else if (/2345explorer/.test(ua)) {
      brand = "2345";
    } else if (/lbbrowser/.test(ua)) {
      brand = "liebao";
    } else if (/maxthon/.test(ua)) {
      brand = "maxthon";
    } else {
      brand = browser;
    }
  } catch (e) {
    console.error(` getBrowser error: ${e}`);
  }
  return `${brand}_${browser}_${version}`;
}

判断是否为触摸屏设备

https://stackoverflow.com/a/4819886

1
2
3
4
5
function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

判断操作系统

https://stackoverflow.com/a/11752084

1
2
3
4
5
6
7
8
9
const isMac = /Mac/.test(platform);

const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);

const isIOS = /(iPhone|iPod|iPad)/i.test(navigator.platform);

const isWindows =  /Win/.test(platform);

const isAndroid = /Android/.test(userAgent);
1
2
3
4
5
6
7
8
9
// mac
function isMacintosh() {
  return navigator.platform.indexOf('Mac') > -1
}

// windows
function isWindows() {
  return navigator.platform.indexOf('Win') > -1
}

判断是否是Chrome浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
isChrome: function () {
        const navigator = window.navigator
        const isChromium = window.chrome
        const vendorName = navigator.vendor
        const isOpera = typeof window.opr !== 'undefined'
        const isIEEdge = navigator.userAgent.indexOf('Edge') > -1
        const isIOSChrome = navigator.userAgent.match('CriOS')

        if (isIOSChrome) {
           // iOS Chrome 
            return true
        } 
        
        if (
            isChromium !== null &&
            typeof isChromium !== 'undefined' &&
            vendorName === 'Google Inc.' &&
            isOpera === false &&
            isIEEdge === false
        ) {
            return true
        }
        return false
    },

获取浏览器默认语言

1
2
3
function getLanguage(){
    return window.navigator.language || window.navigator.userLanguage
}