如何检测设备是否是桌面和/或移动设备,以及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()例如以检查设备类型是否为移动设备。它具有检查设备是平板电脑还是台式机的其他方法，以及返回有关浏览器的有用信息的其他方法。