在前端开发中，判断用户设备类型是常见需求，可通过浏览器环境检测、设备能力特征分析等方式实现。以下是具体实现思路及代码示例：

一、通过User-Agent检测设备类型

原理 ：User-Agent 是浏览器发送给服务器的标识字符串，包含设备、系统、浏览器等信息。实现步骤 ：

1. 提取 navigator.userAgent 字符串
2. 通过正则表达式匹配特征关键词

function detectDevice() {
  const userAgent = navigator.userAgent.toLowerCase();
  const device = {};

 #技术分享
  const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
  device.isMobile = isMobile;


  if (/(iphone|ipad|ipod)/i.test(userAgent)) {
    device.type = 'ios';
    device.model = /iphone/i.test(userAgent) ? 'iPhone' : 'iPad';
  } else if (/android/i.test(userAgent)) {
    device.type = 'android';

    const androidVersion = userAgent.match(/android (\d+\.\d+)/);
    device.version = androidVersion ? androidVersion[1] : '未知';
  } else if (/windows phone/i.test(userAgent)) {
    device.type = 'windows phone';
  } else if (/macintosh/i.test(userAgent)) {
    device.type = 'mac';
  } else if (/windows/i.test(userAgent)) {
    device.type = 'windows';
  } else {
    device.type = '其他';
  }


  device.isTablet = (/(ipad|android tablet|windows phone 8.1|kindle|nexus 7)/i.test(userAgent)) && !device.isMobile;


  if (/chrome/i.test(userAgent)) {
    device.browser = 'Chrome';
  } else if (/firefox/i.test(userAgent)) {
    device.browser = 'Firefox';
  } else if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent)) {
    device.browser = 'Safari';
  } else if (/msie|trident/i.test(userAgent)) {
    device.browser = 'IE/Edge';
  } else {
    device.browser = '未知';
  }

  return device;
}

const deviceInfo = detectDevice(); console.log('设备类型:', deviceInfo.type); console.log('是否为移动设备:', deviceInfo.isMobile); console.log('浏览器:', deviceInfo.browser);

二、结合屏幕尺寸与触摸事件检测

原理 ：移动设备通常屏幕较小，且支持触摸操作，而 PC 设备以鼠标操作为主。

function enhanceDeviceDetection() {
  const device = detectDevice();


  if (window.innerWidth <= 768) {
    device.layout = 'mobile';
  } else if (window.innerWidth <= 1024) {
    device.layout = 'tablet';
  } else {
    device.layout = 'desktop';
  }


  device.hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;


  if (navigator.maxTouchPoints === 0) {
    device.pointerType = 'mouse';
  } else if (navigator.maxTouchPoints > 2) {
    device.pointerType = 'pen';
  } else {
    device.pointerType = 'touch';
  }

  return device;
}

三、设备能力API检测（更准确的现代方案）

原理 ：通过浏览器原生 API 获取设备硬件特性，避免 User-Agent 被伪造的问题。

async function detectDeviceByAPI() {
  const device = {};


  if (navigator.device) {
    try {
      const deviceInfo = await navigator.device.getCapabilities();
      device.brand = deviceInfo.brand;
      device.model = deviceInfo.model;
      device.vendor = deviceInfo.vendor;
    } catch (error) {
      console.log('NavigatorDevice API获取失败:', error);
    }
  }


  device.retina = window.devicePixelRatio >= 2;


  if (navigator.getBattery) {
    navigator.getBattery().then(battery => {
      device.batteryLevel = battery.level;
      device.batteryCharging = battery.charging;
    });
  }

  return device;
}

四、框架/库方案（简化实现）

如果项目中使用框架，可直接使用成熟库：

1. react-device-detect （React专用）
2. mobile-detect.js （轻量级通用库）
3. ua-parser-js （专业User-Agent解析库）

五、注意事项

1. User-Agent不可靠 ：用户可手动修改UA，或某些浏览器（如微信内置浏览器）会伪装UA。
2. 结合多种检测方式 ：建议同时使用User-Agent、屏幕尺寸、触摸事件等多重检测，提高准确性。
3. 响应式设计优先 ：现代开发中更推荐通过CSS媒体查询（ @media ）实现响应式布局，而非完全依赖设备检测。
4. 性能优化 ：避免频繁检测设备，可在页面加载时缓存检测结果。

六、面试延伸问题

1. 为什么User-Agent检测不可靠？请举例说明。
2. 在iOS和Android上，如何区分手机和平板？
3. 如果用户强制旋转屏幕（如手机横屏），设备检测结果需要更新吗？如何处理？

通过以上方案，可全面检测用户设备类型、系统、浏览器及硬件特性，为前端适配提供依据。