JavaScript判斷系統和瀏覽器

无昵称老炮儿發表於2024-08-16
JavaScript瀏覽器

在做專案的時候，Web端需要適配移動端，且部分引數需要判斷對應系統或瀏覽器。

在IOS中，因為高版本的系統Safari瀏覽器採用了Mac的核心，所以導致普通的判斷無法識別到對應系統。
(userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints > 1) 能有效識別是apple產品，且是觸屏的，透過此方法能識別高版本的IOS_Safari。

Navigator 介面的 maxTouchPoints 只讀屬性返回當前裝置支援的最大同時觸控接觸點數。

if (navigator.maxTouchPoints > 1) {
  // 瀏覽器支援多點觸控
}

識別對應系統和瀏覽器程式碼：

/* 匹配系統 */
function detectDeviceType(userAgent) {
  if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent) || (userAgent.match(/(macintosh)/) && navigator.maxTouchPoints > 1)) {
    return 'iOS';
  }
  else if (/android/i.test(userAgent)) {
    return 'Android';
  }
  else {
    return 'PC';
  }
}
/* 匹配瀏覽器 */
function detectBrowser(userAgent) {
  if (/safari/i.test(userAgent) && !/(chrome|crios|crmo|edg|edge)/i.test(userAgent)) {
    return 'Safari';
  } else if (/(chrome|crios|crmo)/i.test(userAgent) && !/(edg|edge)/i.test(userAgent)) {
    return 'Chrome';
  } else if (/(edg|edge|edgios|edga|edg)/i.test(userAgent)) {
    return 'Edge';
  } else if (/(firefox|fxios)/i.test(userAgent)) {
    return 'Firefox';
  } else if (/xiaomi/i.test(userAgent)) {
    return 'Xiaomi';
  } else if (/huawei/i.test(userAgent)) {
    return 'Huawei';
  } else if (/samsung/i.test(userAgent)) {
    return 'Samsung';
  } else {
    return 'Other';
  }
}
/*系統_瀏覽器*/
function joinSource() {
  const userAgent = navigator.userAgent.toLowerCase();
  var sys = detectDeviceType(userAgent);
  if (sys == "PC") {
    return "PC_Browser";
  } else if (sys == "Android") {
    return sys + "_" + detectBrowser(userAgent);
  } else if (sys == "iOS") {
    return sys + "_" + detectBrowser(userAgent);
  }
}

相關文章