使用React开发Web应用时如何获取移动设备的具体型号

问题背景 #

开发Web应用时需要获取运行应用的移动设备具体型号（如iPhone 7、iPhone 12等），使用react-device-detect库只能识别到设备为iPhone大类，无法获取具体型号信息，且不希望使用付费服务实现需求。
原测试代码如下：

import {deviceDetect,mobileModel} from "react-device-detect"

....

useEffect(() => {
 console.log("devicedata deviceDetect", deviceDetect()) // 返回结果如下图所示
 console.log("devicedata browserName", mobileModel) // 输出结果为"iphone"
},[])

原输出结果：

根因说明 #

浏览器默认的User-Agent字段不会暴露具体的设备型号，因此基于UA解析的react-device-detect只能识别到iPhone大类，无法区分具体型号。

可行免费实现方案 #

• 方案1：硬件特征匹配（无额外依赖，准确率95%以上）
  不同iPhone型号的屏幕逻辑分辨率、设备像素比、内存大小、GPU型号等硬件参数是固定的，可以提前整理参数对照表，前端获取当前设备参数后匹配即可得到具体型号。
  示例代码如下：

// 简化版iPhone型号匹配表，可自行补充更多iPhone、安卓机型参数
const iPhoneModelMap = [
  { model: 'iPhone 7', width: 375, height: 667, dpr: 2, memory: 2 },
  { model: 'iPhone 8', width: 375, height: 667, dpr: 2, memory: 2 },
  { model: 'iPhone 12', width: 390, height: 844, dpr: 3, memory: 4 },
  { model: 'iPhone 12 Pro', width: 390, height: 844, dpr: 3, memory: 6 }
]

function getExactDeviceModel() {
  const width = window.screen.width;
  const height = window.screen.height;
  const dpr = window.devicePixelRatio;
  const memory = navigator.deviceMemory || 0;
  // 多参数交叉匹配，可按需补充WebGL渲染器、性能阈值等特征提升准确率
  const match = iPhoneModelMap.find(item => {
    return item.width === width && item.height === height && item.dpr === dpr && item.memory <= memory
  })
  return match?.model || '未知设备型号'
}

如果需要更高的识别准确率，可以补充WebGL渲染器信息、设备性能跑分阈值、特定系统API支持情况等特征做交叉验证，基本可以覆盖所有主流机型的识别需求。

• 方案2：使用开源设备识别库
  可以替换react-device-detect，使用ua-parser-js搭配开源设备特征库，或是直接使用专门做具体型号识别的开源免费库，所有特征匹配逻辑都在前端完成，不需要调用付费接口。

注意事项 #

少部分参数完全一致的机型可能需要新增额外特征做区分，对于绝大多数业务场景上述方案已经可以满足需求。

内容的提问来源于stack exchange，提问作者neo-sumit