Question

126

How to detect if device is desktop and/or mobile, and if connection is wifi or not with AngularJS

rated 0 times [ 128] [ 2] / answers: 1 / hits: 97147 / 8 Years ago, mon, january 2, 2017, 12:00:00

I have done some research on SO but the similar Q&A are for detecting if it has connection or not, but not about connection type.

The purpose of my website is that, if a user is on mobile(phone or tablet) and on wifi, play a video clip; if a user is on mobile and not on wifi, play a video clip; if a user is not on mobile, then play the video clip.

The reason for the different behavior is to avoid possible surcharges happen to the user due to the relatively larger size of the video clip. That is not related to speed - nowadays speed difference of LTE v.s. wifi maybe only little; it is more for the concern of users getting charged for the data usage without wifi connection.

So my question is, using AngularJS(<2.0),
1) How to detect the device is desktop or mobile
2) How to detect the device is connected to wifi or not

(I guess for Q1, the fallback is to use Bootstrap @media, but it isn't ideal.)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nicholas

Add To Favorites

Follow

Total Points: 188

Total Questions: 76

Total Answers: 103

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

answered 8 Years ago marisela · Accepted Answer

You don't need Angular to do such check.

In order to detect if a device is a desktop or a mobile, use navigator.userAgent, see this answer

In order to detect the connection type, use navigator.connection, see this answer

Be careful, this API support is not universal, see here.

Another way to do it is to try this plugin, which relies on internet speed check, but I have never used it.

Finally, if you REALLY need this info for smartphone users, convert your website on Cordova, then distribute your app.