桌面端Chrome中navigator.maxTouchPoints值为10的原因及移动设备判断方案

桌面端Chrome返回navigator.maxTouchPoints=10的原因 #

navigator.maxTouchPoints返回的是当前设备硬件支持的最大同时触控点数，和设备是移动端还是桌面端没有直接绑定关系。现在大量桌面设备都搭载了触控屏，比如二合一笔记本、触控屏台式机，只要设备本身支持触控，桌面端Chrome就会返回对应触控点数，10是绝大多数消费级触控屏的常规支持上限，所以不能单独用该属性大于0作为移动端的判断依据。

可靠的移动设备判断方案 #

不要依赖单一特征做判断，组合多个特征校验可以大幅提升准确率，常用的可行方案如下：

• 组合UA、平台标识、触控属性判断
  针对安卓浏览器PC模式、iPadOS伪装桌面UA的场景，组合多属性的判断逻辑参考：

  const isMobile = (() => {
    // 常规UA匹配
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      return true
    }
    // 适配iPadOS 13+ 伪装成Mac桌面端的场景
    if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
      return true
    }
    // 适配安卓切换PC模式的场景，优先用新版Chromium提供的userAgentData判断
    if (navigator.userAgentData && !navigator.userAgentData.mobile) {
      return false
    }
    // 兜底小屏触控设备判断
    return window.matchMedia('(max-width: 768px)').matches && 'ontouchstart' in window
  })()
  

• 利用指针特性做业务适配
  如果判断设备类型的最终目的是做交互/布局适配，优先用CSS媒体查询代替JS设备判断，精准度更高：

  /* 匹配触摸屏设备，不管是移动端还是触控桌面端 */
  @media (pointer: coarse) {
    /* 加大点击区域等触控适配逻辑 */
  }
  /* 匹配小屏设备 */
  @media (max-width: 768px) {
    /* 移动端布局逻辑 */
  }
  

• 特有API校验兜底
  移动端浏览器普遍支持TouchEvent、window.orientation等桌面端少见的API，可作为补充校验项降低误判概率。

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