Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I detect specific iOS version with jquery?

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.

like image 930
Shawn Taylor Avatar asked Nov 07 '12 23:11

Shawn Taylor


4 Answers

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.

like image 190
David Hellsing Avatar answered Nov 17 '22 17:11

David Hellsing


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 ) { ... }
like image 41
Jim Bergman Avatar answered Nov 17 '22 18:11

Jim Bergman


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

like image 2
aug Avatar answered Nov 17 '22 18:11

aug


Use JavaScript to look at the user agent header.

navigator.userAgent
like image 1
sainiuc Avatar answered Nov 17 '22 18:11

sainiuc