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

Question

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

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

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

所以我的问题是，使用 AngularJS(<2.0)，1) 如何检测设备是桌面设备还是移动设备 2) 如何检测设备是否连接到 wifi

（我想对于第一季度，后备方案是使用 Bootstrap @media，但这并不理想。）

原文由 jamesdeath123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

为了检测设备是台式机还是移动设备，请使用 navigator.userAgent ，请参阅此 答案

为了检测连接类型，请使用 navigator.connection ，请参阅此 答案

请注意，此 API 支持不是通用的，请参见 此处。

另一种方法是试试这个 插件，它依赖于互联网速度检查，但我从未使用过它。

最后，如果您 真的 需要为智能手机用户提供此信息，请在 Cordova 上转换您的网站，然后分发您的应用程序。

原文由 Jacques Cornat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 JustLearning 发布，翻译遵循 CC BY-SA 4.0 许可协议