JavaScript 实现设备与浏览器的智能识别

当今的互联网多设备平台、多浏览器共存，为用户提供一致且优质的用户体验是一项挑战。随着移动设备的普及和技术的发展，了解访问者所使用的设备类型和浏览器变得尤为重要。这不仅有助于开发者根据不同的环境优化网站布局和交互设计，还能让营销团队更好地定位目标受众，提供个性化的服务。

本文将介绍一种实用的方法，利用JavaScript来智能识别用户的设备类型（如iOS、Android或PC）以及他们正在使用的浏览器（如Safari、Chrome、Edge等）。通过这种方式，我们可以根据不同的设备特性来调整网站的行为，实现更好的兼容性和用户体验。接下来，我们将深入探讨具体的实现细节，并提供易于理解的代码示例，帮助你快速上手并应用到自己的项目中。

设备类型检测函数

function detectDeviceType(userAgent) {
  if (/iPad|iPhone|iPod/.test(userAgent) || (/Macintosh/.test(userAgent) && navigator.maxTouchPoints > 1)) {
    return 'iOS';
  }
  if (/android/.test(userAgent)) {
    return 'Android';
  }
  return 'PC';
}

浏览器检测函数

function detectBrowser(userAgent) {
  if (/safari/.test(userAgent) && !/chrome|crios|crmo|edg|edge/.test(userAgent)) {
    return 'Safari';
  }
  if (/chrome|crios|crmo/.test(userAgent) && !/edg|edge/.test(userAgent)) {
    return 'Chrome';
  }
  if (/edg|edge|edgios|edga|edg/.test(userAgent)) {
    return 'Edge';
  }
  if (/firefox|fxios/.test(userAgent)) {
    return 'Firefox';
  }
  // 下面的检测针对的是特定厂商的定制浏览器，而非设备品牌
  if (/xiaomi/.test(userAgent)) {
    return 'Xiaomi Browser';
  }
  if (/huawei/.test(userAgent)) {
    return 'Huawei Browser';
  }
  if (/samsung/.test(userAgent)) {
    return 'Samsung Internet';
  }
  return 'Other';
}

组合设备类型和浏览器

function getDeviceAndBrowser() {
  const userAgent = navigator.userAgent.toLowerCase();
  const device = detectDeviceType(userAgent);
  const browser = detectBrowser(userAgent);

  if (device === 'PC') {
    return 'PC_Browser';
  }
  return `${device}_${browser}`;
}

 

本文被 前端开发 专题收录