How can I detect specific iOS version with jquery?

Question

So that mapping links open the maps app like they used to, I want to present a different link depending on whether a user is on iOS 6 or other (iOS 4, 5, Android, whatever).

Something like: -- if on iOS 6.0 or higher, show http://maps.apple.com?q="address", if other, show http://maps.google.com?q="address".

NOTE: I realize you can also call the maps app directly as opposed to via a web link (don't have it handy right now), but that would not fix the issue, since someone on Android or lesser iOS would get no use from that.

Answer 1

You can detect iOS version using the navigator.userAgentstring. Something like:

if(/(iPhone|iPad|iPod)\sOS\s6/.test(navigator.userAgent)) {
    // use apple maps
}

Note that this is in no way future proof, user agent strings can change, and so will the OS. Also AFAIK, google maps via the browser is available on all platforms, including iOS 6.

Answer 2

Here's a bit of JS to determine iOS and Android OS version. No jQuery required.

Tested with actual user agent strings for iOS 4.3 to 6.0.1, and Android 2.3.4 to 4.2

var userOS;    // will either be iOS, Android or unknown
var userOSver; // this is a string, use Number(userOSver) to convert

function getOS( )
{
  var ua = navigator.userAgent;
  var uaindex;

  // determine OS
  if ( ua.match(/iPad/i) || ua.match(/iPod/i) || ua.match(/iPhone/i) )
  {
    userOS = 'iOS';
    uaindex = ua.indexOf( 'OS ' );
  }
  else if ( ua.match(/Android/i) )
  {
    userOS = 'Android';
    uaindex = ua.indexOf( 'Android ' );
  }
  else
  {
    userOS = 'unknown';
  }

  // determine version
  if ( userOS === 'iOS'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 3, 3 ).replace( '_', '.' );
  }
  else if ( userOS === 'Android'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 8, 3 );
  }
  else
  {
    userOSver = 'unknown';
  }
}

Then to detect a specific version and higher, try:

if ( userOS === 'iOS' && Number( userOSver.charAt(0) ) >= 5 ) { ... }

Answer 3

You want to look into the user-agent string. The Safari web browser has a way of reporting what device (iPad, iPhone, etc) is being used and also the version number so its a matter of indexOf the information in that compact little string.

http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3

Some other helpful/very related Stackoverflow questions:

Detect iOS version less than 5 with JavaScript

Detecting iOS Version on a Web Page

Check if iOS version is 3.0 or higher with PHP or Javascript

Answer 4

Use JavaScript to look at the user agent header.

navigator.userAgent