如何检测设备是否是桌面和/或移动设备，以及AngularJS是否与wifi连接

Question

我已经对SO进行了一些研究，但类似的Q＆A用于检测它是否有连接，但不是关于连接类型。

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

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

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

（我猜对于Q1，后备是使用Bootstrap @media，但它并不理想。）

Answer 1

您不需要Angular进行此类检查。

要检测设备是桌面设备还是移动设备，请使用navigator.userAgent ，请参阅此答案

要检测连接类型，请使用navigator.connection ，查看此答案
请注意 ，此API支持不是通用的，请参见此处 。
另一种方法是尝试这个插件 ，它依赖于互联网速度检查，但我从来没有使用它。
最后，如果您真的需要智能手机用户使用此信息，请在Cordova上转换您的网站，然后分发您的应用。

Answer 2

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

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

Answer 3

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

正如其所说，危险是未知设备被认为是快速的。

为了获得桌面与移动的感觉，有一种用于收听触摸事件的技术。 cf： 使用JavaScript检测“触摸屏”设备的最佳方法是什么？

关于你是否应该自动播放视频片段，如果它是一个HTML5播放器，它无论如何都不会在移动设备上自动播放，因为你提到的原因，除非它与触摸事件（如击球）有关。

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