如何用JavaScript准确检测移动设备？现有userAgent方法失效

之前仅通过navigator.userAgent匹配android|iphone|kindle|ipad的方式容易出现误判，比如部分PC浏览器的UA会包含Android字段，推荐以下几种更可靠的检测思路：

1. 优化UA检测逻辑 #

在匹配Android关键词时，同时验证是否包含移动端特有的标识（如Mobile），并排除桌面系统的关键词（如Windows、Macintosh），避免把桌面端的Android模拟器/兼容模式误判为移动设备。示例代码：

function isMobile() {
  const ua = navigator.userAgent.toLowerCase();
  // 匹配移动设备关键词，同时排除桌面系统
  const isMobileUA = /(iphone|ipad|kindle|android.*mobile)/.test(ua);
  const isDesktopUA = /(windows|macintosh|linux)/.test(ua);
  return isMobileUA && !isDesktopUA;
}

2. 使用媒体查询检测设备特性 #

利用CSS媒体查询的APIwindow.matchMedia，检测设备的交互特性（如触摸精度）或屏幕尺寸，这比UA更准确，因为它直接基于设备硬件能力：

• (pointer: coarse)表示设备使用粗指针（如手指触摸），是移动设备的典型特征
• 结合屏幕宽度可辅助检测小屏设备

示例代码：

function isMobile() {
  // 检测触摸设备，同时可结合屏幕宽度判断
  const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
  const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
  return isTouchDevice || isSmallScreen;
}

3. 结合触摸点数量检测 #

通过navigator.maxTouchPoints获取设备支持的最大触摸点数，移动设备通常至少支持1个触摸点，普通PC一般为0（带触摸的PC需结合其他方法验证）：

function isMobile() {
  const hasTouchSupport = navigator.maxTouchPoints > 0;
  // 再结合UA进一步验证
  const ua = navigator.userAgent.toLowerCase();
  const isMobileUA = /(iphone|ipad|kindle|android)/.test(ua);
  return hasTouchSupport && isMobileUA;
}

实用建议 #

实际项目中推荐组合多种检测方式，比如同时验证UA、触摸特性和屏幕尺寸，减少单一方法的误判概率。示例：

function isMobile() {
  const ua = navigator.userAgent.toLowerCase();
  const isMobileUA = /(iphone|ipad|kindle|android.*mobile)/.test(ua) && !/(windows|macintosh)/.test(ua);
  const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
  const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
  return isMobileUA || (isTouchDevice && isSmallScreen);
}

内容的提问来源于stack exchange，提问作者Newcolator