How do you detect 3G vs. Wifi connection on mobile safari?

Not unless browsers start giving this information away through the DOM which, currently, they don't. There is a navigator javascript objects which holds many things but not what you're looking for. I've also read in the news recently that some cellular carrier was adding cookies to HTTP requests made on their phones. They were found to be adding customer IDs to cookies (huge security breach!!).

Mobile Safari does add some new DOM additions but not what you're asking for.

Short of these options, you can't. Layers of the Internet Protocol are meant to encapsulate & hide the details of the bottom layers. You can't detect Edge, 3G or Wifi any more than you can detect cable, DSL or finer optics.

Finally, even if you could get this information, it wouldn't do you any good unless you had details of every single node in your TCP connection. For example, I could have the following setup :

iPad  ---WiFi---->  iPhone's Hotspot  ---3G--->  Carrier ---unknown--->>>

Addendum

In 2012-2013, the W3C was fleshing out The Network Information API which was aimed at providing "an interface for web applications to access the underlying connection information of the device". At the time, the API stipulated that an "estimated" bandwidth for the browser would be obtainable via navigator.connection.bandwidth. As of April 2014, that work has since been discontinued!!

Update 1: As of 20th October 2015, work continues on this API. You can find the latest Editor's drafts for the Network Information API on the W3C's github pages.

Update 2: In June 2020, Apple declined to implement the Network Information API in Safari due to privacy concerns

Although you cannot use data from a browser to detect if the user is on Wifi or a cellular connection - capturing the user's IP may be one way to differentiate between a Wifi and Cellular connection.

In this article about how cellular impacts your IP address (http://classroom.synonym.com/wifi-change-ip-17586.html) it states the following:

While on Wi-Fi, your device's public IP will match all other computers on your network, and your router assigns a local IP. While using a cellular connection, your cell carrier assigns a public IP. Connecting to the cellular Internet does not use a router, so your device won't have a local IP.

IF ip = localIp, then connection = wifiConnection

IF ip = publicIp, then connection = cellularConnection

Here's a screenshot of my IP when I'm on cellular:

Here's a screenshot of my IP (right after turning off cellular) on Wifi:

This could be one answer to the problem without browser help.

At the moment this limitation has improved, but there are still restrictions with the Network Information API supported in the different browsers ( mobile or not ), https://caniuse.com/#search=network

If this helps you, In our case as our specific mobile application is hybrid and developed using Ionic, we have been able to do it on either iOs or Android using this cordova plugin: https://github.com/apache/cordova-plugin-network-information that works like a charm.