Is there a way to determine if a Javascript client is using a phone on a mobile network as opposed to wifi?

Question

I'm trying to make a site as responsive as possible for phone users, and that means removing several bandwidth-hungry features. In particular, I'd like to load an external font if the user is on wifi but not on 3g/4g.

A pretty good proxy for this is 'phone or tablet', with tablets usually being the cutoff for 'good connection'. This kinda works, but there are 3g/4g tablets, and there are phones on wifi, so it's not perfect.

I don't think it's possible to get this any better, but perhaps stackoverflow's collective wisdom has discovered a way. Is this detectable?

@Colin: Not true. Those questions are for native code. This question is in regard to a webpage executing JavaScript. — Chris Laplante, Jul 25 '12 at 20:16
Seems like native apps might be an equally valid way to simplify this.... — Tetsujin no Oni, Jul 25 '12 at 20:18

score 3 · Answer 1 · edited May 23 '17 at 12:02

3

Rather than focusing on mobile or not, just do a bandwidth test. The only way to really be sure is measure the time to download a file to their device.

Try the accepted answer here: How to detect internet speed in Javascript?

edited May 23 '17 at 12:02

Community

1
1

answered Jul 25 '12 at 20:16

Matt Gibson

14,616
7
47
79

1

I thought about suggesting this but then I thought about LTE.. Just because you have a blazing fast internet connection does not mean you have lots of bandwidth to spare. – Radu Jul 25 '12 at 20:19

score 2 · Answer 2 · edited May 23 '17 at 10:24

You can try the solution suggested in this answer, that is to use navigator.connection.type. However, this is definitely non-standard and it seems to be limited to Android devices only. Also, see the MDN entry, which mentions a metered property on the same navigator.connection object - this may also be useful.

For the best coverage: var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

score 1 · Answer 3 · answered Jul 25 '12 at 20:16

The only way to do this I know of, which has it's own problem, is to do a reverse lookup on the IP address of the request at the time of the request (on the web server) and see if it's from a Wireless Carrier. The two problems with this are; that I don't know if mobile devices use a different network than say wired networks (Version Wireless vs Version Fios), and the other problem is employees of those companies who may actually be wired will appear wireless.

Diodeus - James MacFarlane · Answer 4 · 2012-07-25T20:19:59.543

0

JavaScript does not provide any hooks into network-level connection types. The best you can do is time the download of a known test file and decide based on that.

If that fails, just ask the user if they prefer the high/low bandwidth setting.

edited Jul 25 '12 at 20:19

answered Jul 25 '12 at 20:14

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 5 · answered Jul 25 '12 at 20:18

You could try doing a network probe for very common local addresses (only reachable over Wifi), such as 192.168.1.100 and friends. Here's how:

Create an img element with an onError handler.
Set the src property to the address you want to "ping"
If you get an error, then you know the address does not exist
No error means the address exists

I initially read about this technique in Ajax Security (great book).

Is there a way to determine if a Javascript client is using a phone on a mobile network as opposed to wifi?

5 Answers5