如何使用 reactjs 在 webapps 上获取特定的移动设备型号？

Posted 2023-02-23

【中文标题】如何使用 reactjs 在 webapps 上获取特定的移动设备型号？

【英文标题】：How to get specific mobile device model on webapps using reactjs?

【发布时间】：2021-10-13 07:58:21

【问题描述】：

当我的网络应用在移动设备上运行时，我想获取 iphone 7、iphone 8 或 iphone 12 等移动设备的型号名称但我只得到 iphone 而不是特定的设备型号。我目前正在使用 react-device-detect。

有什么方法可以实现吗？我不想使用任何付费服务。

任何帮助将不胜感激。 谢谢。

代码：

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

    ....

    useEffect(() => 
     console.log("devicedata deviceDetect", deviceDetect()) // gives object shown in image below
     console.log("devicedata browserName", mobileModel) // gives "iphone"
    ,[])

输出：

【问题讨论】：

我认为 useragent 不会返回 iphone 版本，例如 iphone5 或 13 等。

那么还有其他方法可以实现吗？

【参考方案1】：

你可以读取用户代理的api数据并做一些正则表达式来提取有用的信息

const userAgent= navigator.userAgent
const device = 
  iPad: /iPad/.test(userAgent),
  iPhone: /iPhone/.test(userAgent),
  android5: /Android 5/.test(uauserAgent,
 Android4: /Android 4/.test(uauserAgent

阅读有关检测信息的更多信息 Detect Device - Broswer

MDN User Agent

【讨论】：

感谢您的回答，但这仍然不能帮助我获得设备型号

这个用浏览器比较麻烦，我不确定能不能搞定，但是如果你用Capacitor.js我相信会给你你需要的信息，但我还没试过网络获取移动设备信息，所以试试Capacitor.js-device

好的，谢谢，试试看