前端瀏覽器獲取設(shè)備信息和系統(tǒng)信息只能通過navigator對(duì)象的userAgent屬性獲取。小米9和蘋果7plus的userAgent長(zhǎng)這樣：

`//米9`

`"Mozilla/5.0 (Linux; Android 9; MI 9 Build/PKQ1.181121.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044904 Mobile Safari/537.36 MMWEBID/9234 MicroMessenger/7.0.6.1500(0x2700063E) Process/tools NetType/WIFI Language/zh_CN"`

`//蘋果7 plus`

`"Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Mobile/14C92 Safari/601.1 wechatdevtools/1.02.1907300 MicroMessenger/7.0.4 Language/zh_CN webview/15693784144112003 webdebugger port/58531"`

我們現(xiàn)在要獲取三個(gè)參數(shù)

1. 手機(jī)型號(hào)，這個(gè)看上面的只有安卓能獲取，這里是MI 9，蘋果只能知道是iPhone還是iPad，無法知道具體手機(jī)型號(hào)。
2. 系統(tǒng)版本，安卓蘋果手機(jī)都能獲取，上面的安卓是Android 9，蘋果是iPhone OS 10_2。
3. 微信版本，如果在微信瀏覽器中打開，我們需要獲取微信的版本。這個(gè)蘋果安卓都能獲取，上面顯示的是MicroMessenger/7.0.4

先判斷是蘋果還是安卓，代碼如下：

let userAgent = navigator.userAgent
if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
  console.log('蘋果手機(jī)')
}
if (userAgent.includes('Android')) {
  console.log('安卓手機(jī)')
}

下面我們用正則分別來獲取這三個(gè)需要的參數(shù)

系統(tǒng)版本（安卓）：

這里的 (?=;) 是指到分號(hào)為止，但不包括分號(hào)。第一個(gè)問號(hào)，就是 /Android.*?(?=;)/ 是指匹配第一個(gè)后面括號(hào)里的內(nèi)容，也就是匹配第一個(gè)分號(hào)。

let m1 = userAgent.match(/Android.*?(?=;)/)
if (m1 && m1.length > 0) {
  system = m1[0]    // Android 9
}

系統(tǒng)版本（蘋果）：

這個(gè)和上面一樣，只是匹配空格。

let m1 = userAgent.match(/iPhone OS .*?(?= )/)
if (m1 && m1.length > 0) {
  system = m1[0]    // iPhone OS 10_2
}

微信版本：

let m1 = userAgent.match(/MicroMessenger.*?(?= )/)
if (m1 && m1.length > 0) {
  wechat = m1[0]    // MicroMessenger/7.0.4
}

手機(jī)型號(hào)（安卓）：

這里由于包含一個(gè)非問號(hào)開頭的括號(hào)表示，所以match會(huì)有2個(gè)結(jié)果，第一個(gè)是全部匹配，第二個(gè)是括號(hào)內(nèi)的匹配，我們只要括號(hào)內(nèi)的匹配。

let m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
if (m1 && m1.length > 1) {
  device = m1[1]    // MI 9
}

完整代碼

let webLog = {}
let userAgent = navigator.userAgent
// 獲取微信版本
let m1 = userAgent.match(/MicroMessenger.*?(?= )/)
if (m1 && m1.length > 0) {
  webLog.wechat = m1[0]
}
// 蘋果手機(jī)
if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
  // 獲取設(shè)備名
  if (userAgent.includes('iPad')) {
    webLog.device = 'iPad'
  } else {
    webLog.device = 'iPhone'
  }
  // 獲取操作系統(tǒng)版本
  m1 = userAgent.match(/iPhone OS .*?(?= )/)
  if (m1 && m1.length > 0) {
    webLog.system = m1[0]
  }
}
// 安卓手機(jī)
if (userAgent.includes('Android')) {
  // 獲取設(shè)備名
  m1 = userAgent.match(/Android.*; ?(.*(?= Build))/)
  if (m1 && m1.length > 1) {
    webLog.device = m1[1]
  }
  // 獲取操作系統(tǒng)版本
  m1 = userAgent.match(/Android.*?(?=;)/)
  if (m1 && m1.length > 0) {
    webLog.system = m1[0]
  }
}