如何准确检测移动端与桌面端 不被Chrome开发者工具模拟欺骗

不存在100%无法被人为篡改的前端检测方案，但Chrome开发者工具的默认移动模拟模式只会篡改UA、视口尺寸、maxTouchPoints等少数预设特征，通过多维度特征组合校验，完全可以准确区分真实移动设备和桌面端模拟的移动环境。

• 优先校验未被默认模拟篡改的基础特征
  Chrome DevTools移动模拟默认不会修改以下特征，只要UA识别为移动端但以下特征匹配桌面端特征，即可判定为模拟环境：

  • navigator.platform字段：桌面端Chrome开启模拟后该值仍为Win32/MacIntel/Linux x86_64等桌面平台标识，真实移动端为Linux armv8l/iPhone/iPad等移动平台标识
  • 服务端传输层指纹：桌面端和移动端Chrome的TLS握手扩展顺序、TCP窗口参数、HTTP/2帧优先级设置存在固有差异，这些特征由操作系统网络栈和浏览器内核决定，前端模拟完全无法篡改，是目前准确率最高的判定依据
    基础检测代码示例：

  function isRealMobile() {
    const ua = navigator.userAgent;
    const mobileUaMatch = /Mobi|Android|iPhone|iPad/i.test(ua);
    const desktopPlatforms = ['Win32', 'Win64', 'MacIntel', 'Linux x86_64', 'Linux i686'];
    const isDesktopPlatform = desktopPlatforms.includes(navigator.platform);
    // UA识别为移动端但平台标识为桌面端，直接判定为模拟环境
    if (mobileUaMatch && isDesktopPlatform) return false;
    return mobileUaMatch;
  }
  

• 补充交互行为特征校验，覆盖手动篡改基础字段的场景
  如果用户手动修改了navigator.platform等基础字段，可以通过用户交互特征进一步识别，这些特征默认不会被模拟，普通用户很难手动伪造：

  • hover触发逻辑差异：真实移动设备不支持无点击触发的hover态，桌面端哪怕开启移动模拟，用户用鼠标移动到元素上就会触发CSS hover效果，真实移动端必须用户点击元素才会触发对应状态
  • 事件坐标精度差异：鼠标点击产生的事件坐标都是整数值，真实触摸屏产生的触摸坐标是带小数的浮点值
  • 滚动行为差异：鼠标滚轮滚动是步进式的，每次滚动的deltaY值为固定步长（通常为100的倍数），真实触摸滚动是连续的、带惯性的渐变值，步长无固定规律
  • 传感器特征差异：真实移动端默认支持加速度计、陀螺仪相关API，桌面端开启移动模拟后默认不会开启传感器模拟，DeviceOrientationEvent不会主动触发

注意：不要依赖单一特征做判定，多特征加权校验可以把误判率降到极低。如果场景对设备识别准确率要求极高（比如风控场景），必须搭配服务端的传输层指纹校验，不要完全依赖前端逻辑。

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