如何使用 AngularJS 检测设备是否是台式机和/或移动设备，以及连接是否是 wifi答案

【问题标题】：How to detect if device is desktop and/or mobile, and if connection is wifi or not with AngularJS如何使用 AngularJS 检测设备是否是台式机和/或移动设备，以及连接是否是 wifi
【发布时间】：2017-05-16 21:32:06
【问题描述】：

我对 SO 进行了一些研究，但类似的问答是用于检测它是否有连接，而不是关于连接类型。

我的网站的目的是，如果用户使用手机（手机或平板电脑）和 wifi，播放视频剪辑；如果用户使用移动设备而不是 wifi，则播放视频剪辑；如果用户不在移动设备上，则播放视频剪辑。

不同行为的原因是为了避免由于视频剪辑的尺寸相对较大而可能给用户带来的附加费。这与速度无关 - 现在 LTE 与 LTE 的速度差异。 wifi 可能很少；更多的是担心用户在没有 wifi 连接的情况下收取数据使用费。

所以我的问题是，使用 AngularJS(

（我猜 Q1 的后备方案是使用 Bootstrap @media，但这并不理想。）

【问题讨论】：

将移动网络连接与计量连接相关联是错误的。我在我的手机上签订了无限量的 4G 合同，并且认识使用计量 FTTC 连接的人。
@Quentin 对于某些用例可能是正确的，但对于更一般的情况，如果用户在没有 wifi 的情况下连接，数据使用可能会给用户带来意外费用。
不，一般情况是连接 WiFi 或 3G 或 4G 等可能会产生费用，连接 WiFi 或 3G 可能不会产生费用或 4G 或其他。
@Quentin 对我们用户的研究表明，他们中的大多数人属于前一种情况。

标签： javascript html angularjs

【解决方案1】：

你不需要 Angular 来做这样的检查。

要检测设备是台式机还是移动设备，请使用navigator.userAgent，请参阅此answer

为了检测连接类型，使用navigator.connection，见answer
小心，这个API支持不是通用的，见here。
另一种方法是尝试这个plugin，它依赖于互联网速度检查，但我从未使用过。
最后，如果您真的需要智能手机用户的此信息，请在 Cordova 上转换您的网站，然后分发您的应用程序。

【讨论】：

【解决方案2】：

关于查出是否使用了什么设备，这个angular插件可以省去一些麻烦：ngx-device-detector

安装它：$ npm install ngx-device-detector --save, 添加到构造函数。然后致电this.deviceService.IsMobile() 以检查设备类型是否为移动设备。它具有检查设备是平板电脑还是台式机的其他方法以及返回有关浏览器的有用信息的其他方法。

【讨论】：

这不是一个好的插件。他们不支持开发人员。
到目前为止，看起来这个插件正在做我需要它做的事情。

【解决方案3】：

我鼓励开发人员使用功能检测，而不是浏览器或桌面/移动设备检测。例如，modernizr 具有针对低带宽连接的功能检测，尽管它不适用于所有浏览器： https://modernizr.com/download#lowbandwidth-setclasses&q=connect

正如它所说的那样，危险在于未知设备被认为是快速的。

为了了解桌面与移动设备的区别，有一种技术可以监听触摸事件。参考： What's the best way to detect a 'touch screen' device using JavaScript?

关于您是否应该自动播放视频剪辑，如果它是 HTML5 播放器，出于您提到的原因，它无论如何都不会在移动设备上自动播放，除非它与触摸事件相关联（例如点击播放）。

我已经通过“保存”之前的触摸事件来解决这个问题，例如使用视频播放器进入屏幕，然后重新使用该事件来自动播放。说了这么多，请考虑一下自动播放是否真的是你想要的，因为很多用户觉得它很烦人。

【讨论】：

感谢您的回复。我编辑了问题以解释我们的担忧（数据附加费）。