iPadOS 13.1升级后Javascript移动设备检测失效的解决建议

老兄，这个问题确实挺坑的——Apple在iPadOS 13之后故意把iPad的User Agent改成了Mac风格，直接废掉了传统的UA检测逻辑。不过别慌，我整理了几个靠谱的替代方案，比单纯靠屏幕尺寸靠谱多了：

方案1：利用navigator.maxTouchPoints检测触控能力 #

iPadOS不管怎么伪装UA，本质还是触控设备，它的navigator.maxTouchPoints值会大于0（通常是5，支持5点触控），而普通非触控Mac的这个值是0。我们可以把这个作为核心检测条件，再配合传统UA检测覆盖其他移动设备：

function isMobileOrTablet() {
  // 优先通过触控能力判断，更可靠
  if ('maxTouchPoints' in navigator) {
    return navigator.maxTouchPoints > 0;
  }
  //  fallback到传统UA检测，适配不支持maxTouchPoints的老设备
  return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

方案2：结合navigator.platform精准识别iPad #

虽然iPadOS的UA改成了Mac风格，但navigator.platform依然会保留iPad标识，结合触控检测可以精准定位iPad：

function isiPad() {
  return navigator.platform.includes('iPad') && navigator.maxTouchPoints > 0;
}

// 整合到全局移动设备检测
function isMobileDevice() {
  return isiPad() || /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

方案3：使用CSS媒体查询的特性检测 #

这是最符合现代Web标准的方法——不依赖UA或平台信息，而是直接检测设备的交互特性。比如触摸设备的pointer特性是coarse（粗指针，对应手指），而桌面设备是fine（精细指针，对应鼠标）：

function isMobileDevice() {
  // 检测是否为触摸优先的设备
  return window.matchMedia('(pointer: coarse)').matches;
}

// 如果要更严谨，可以结合hover特性：iPad默认不支持hover（除非外接鼠标）
function isMobileOrTabletStrict() {
  return window.matchMedia('(pointer: coarse) and (any-hover: none)').matches;
}

总结推荐 #

优先用方案3的特性检测，因为它完全不依赖容易被篡改的UA信息，而是基于设备的真实交互能力，兼容性也很好（几乎所有现代浏览器都支持）。如果需要兼容非常老的设备，可以把方案1和方案3结合起来，确保覆盖所有场景。

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