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?

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?

• javascript
• mobile

Share Improve this question Follow asked Jul 25, 2012 at 20:10 bhugabhuga 1,30211 gold badge1414 silver badges2525 bronze badges 2

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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?

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;

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 panies who may actually be wired will appear wireless.

You could try doing a network probe for very mon 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).

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.