如何使用JavaScript检测设备类型

Question

我正在开发一个web应用程序，需要使用JavaScript来检测设备。请问有没有人能告诉我最好的方法是什么？我在谷歌上找到了几种解决方案，但没有一种是完美的。我不想使用像WURFL这样的服务器端检测。

我的更新

我正在使用JavaScript匹配CSS媒体查询来检测设备。使用Paul Irish的polyfill进行媒体查询匹配：https://github.com/paulirish/matchMedia.js/

- MAK Ripon

---

它不是完美的原因是所有的http/web/客户端一起工作是通过隐含的协议/合同，并且本质上是未受监管的。你找到的任何解决方案都将是不完美的，而你在这一点上最好的解决方案就是采取响应式方法。 - Justin L.

根据目标的宽度，您可以评估Si\e。 - Akshay Joy

@JustinL.：我已经有了响应式设计。但是我希望根据设备检测来懒加载某些部分。 - MAK Ripon

Answer 1

您可以使用：

1. JS: 通过用户代理检测

    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))
   

   从这里获取用户代理字符串： http://www.useragentstring.com/pages/useragentstring.php。

2. CSS: 使用响应式设计

3. JS: 通过 screen.width 检测屏幕宽度

- user2050393

---

- Mr_Green

我应该使用哪种screen.width和screen.height来区分三星设备（如Note）和较小的平板电脑？ - user4400167

如果你已经在正则表达式末尾加上了/i，那么就不需要在正则表达式中使用大写字母。 - ccpizza

小心使用userAgent检测。IE 11用户代理包括“iPhone”... - gtournie

Answer 2

我建议您查看http://wurfl.io/

简而言之，如果您导入一个小的JS文件：

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

你将得到一个看起来像这样的JSON对象：

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

< p >（当然，这是假设您正在使用 Nexus 7）那么您将能够执行以下操作：

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

这就是您正在寻找的内容。

免责声明：我是提供该免费服务的公司的员工。谢谢。

- Luca P.

---

嗯，我可能会问，wurfl.js实际上在做什么？它几乎无法阅读。 - Toskan

我明白，这很好，但你们有一天可能会决定关闭服务或要求收费，这样会让我的客户无法检测。又或者，你们的服务器崩溃了。那接下来怎么办？如果直接从你们的服务器复制粘贴这个js文件是不会起作用的。 - Toskan

ScientiaMobile不会关闭服务。我们还将提供升级版的WURFL.js，名为Business Edition。这将给开发人员选择：免费版本（适用于业余爱好者和小商店）和商业级版本，供公司使用额外功能。您收到的JS文件已被最小化，但其中没有特殊的魔法。它只是带有设备数据和一些cookie处理的JSON。WURFL.js的强大之处在于后端，那里运行着一个完整的WURFL设备检测框架实例。 - Luca P.

我不太明白为什么要将一些客户的个人信息发布给第三方后端，只是为了检查客户是否使用平板电脑还是笔记本电脑。 - e741af0d41bc74bf854041f1fbdbf

我猜IP地址和设备屏幕尺寸等信息属于“个人信息”的更广泛定义。另一方面，如果我们指的是人们的年龄、性别、居住地、喜好等个人信息，ScientiaMobile显然不会收集任何这些信息，也没有可能收集到。当然，我们可以利用这些数据来了解移动市场趋势，这也是我们所做的，并且我们很乐意通过季度MOVR报告免费与全世界分享：https://www.scientiamobile.com/page/movr-mobile-overview-report - Luca P.