iPad version detection in JavaScript

Is it possible to check for the iPad version (1 or 2) in a web application? As the user agent looks identical (see http://www.webtrends.com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA) a standard check by browser does not work here.

Can we check for features (like the gyrosc开发者_如何学Cope) in JavaScript which are only available in version 2?

Please try this fiddle. It detects version of iPad by gyroscope availability.

As you can see in Safari Developer Library, event.acceleration is not null on devices that has a gyroscope. Since iPad 1 doesn't has it, we can assume that this device is iPad 1.

To distinguish iPad 2 from iPad 3, we can check a window.devicePixelRatio property, since iPad 3 has Retina display with pixel ratio == 2.

Sorry but currently there is no difference between iPad and iPad 2.

See, there is no difference between the two of them:

iPad:
　Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5

iPad2:
　Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

And notice there, that the versions there are constantly changing in iOS updates.

UPDATE

Looks like there is a difference between them:

iPad:
  Mobile/8F190

iPad 2:
  Mobile/8F191

iPad 3:
  Mobile/9B176 (according to Philipp)

Bit late to this one but by using WEBGL_debug_renderer_info extension, which is part of the WebGL API, you are able to retrieve the vendor of the GPU and the renderer name.

Combining this with screen dimensions of the device you can accurately define which version it is.

// iPad model checks.
function getiPadModel(){
    // Create a canvas element which can be used to retreive information about the GPU.
    var canvas = document.createElement("canvas");
    if (canvas) {
        var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (context) {
            var info = context.getExtension("WEBGL_debug_renderer_info");
            if (info) {
                var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
            }
        }
    }    

if(window.screen.height / window.screen.width == 1024 / 768) {
    // iPad, iPad 2, iPad Mini
    if (window.devicePixelRatio == 1) {
        switch(renderer) {
            default:
                return "iPad, iPad 2, iPad Mini";
            case "PowerVR SGX 535":
                return "iPad"
            case "PowerVR SGX 543":
                return "iPad 2 or Mini";
        }
    // iPad 3, 4, 5, Mini 2, Mini 3, Mini 4, Air, Air 2
    } else {
        switch(renderer) {
            default:
                return "iPad 3, 4, 5, Mini 2, Mini 3, Mini 4, Air, Air 2";
            case "PowerVR SGX 543":
                return "iPad 3";
            case "PowerVR SGX 554":
                return "iPad 4";
            case "Apple A7 GPU":
                return "iPad Air, Mini 2, Mini 3";
            case "Apple A8X GPU":
                return "iPad Air 2";
            case "Apple A8 GPU":
                return "iPad Mini 4";
            case "Apple A9 GPU":
                return "iPad 5, Pro 9.7";
        }
    }
// iPad Pro 10.5
} else if (window.screen.height / window.screen.width == 1112 / 834) {
    return "iPad Pro 10.5";
// iPad Pro 12.9, Pro 12.9 (2nd Gen)
} else if (window.screen.height / window.screen.width == 1366/ 1024) {
    switch(renderer) {
        default:
            return "iPad Pro 12.9, Pro 12.9 (2nd Gen)";
        case "Apple A10X GPU":
            return "iPad Pro 12.9 (2nd Gen)";
        case "Apple A9 GPU":
            return "iPad Pro 12.9";
    }
} else {
    return "Not an iPad";
}
}

It can also be done for iPhone models, this blog goes into more detail.

Detect between iPad 1 and 2 Steps:

1. Check UA String for iPad
2. Check for Gyroscope

Detect between iPad 2 and 3 Steps:

1. Check UA String for iPad
2. Check Pixel Density (Retina iPad 3 Displays = 2)

Detect between iPad 3 and 4 Steps:

1. Check UA String for iPad
2. Check Pixel Density (Retina Displays = 2)
3. Check the Devices Maximum Anisotropy (iPad 3 = 2, iPad 4 = 16)

Maximum Anisotropy of 16 usually indicates a modern device with decent graphics performance.

var gl;
var iPadVersion = false;

window.ondevicemotion = function(event) {
  if (!iPadVersion && navigator.platform.indexOf("iPad") != -1) {
    iPadVersion = 1;
    if (event.acceleration) iPadVersion = window.devicePixelRatio;
  }
  window.ondevicemotion = null;
}

function initWebGL(canvas) {
  gl = null;

  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  if (!gl) {
    gl = null;
  }

  return gl;
}

function checkMaxAnisotropy() {
  var max = 0;

  var canvas = document.getElementById('webGLCanvasTest');
  gl = initWebGL(canvas);

  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  if (gl) {
    var ext = (
      gl.getExtension('EXT_texture_filter_anisotropic') ||
      gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
      gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
    );

    if (ext){
      max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
    }
  }
  return max;
}

function isiPad( $window ) {
  var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera;
  return (/iPad/).test(ua);
}


function getiPadVersion( $window ) {
  if(isiPad(window) && window.devicePixelRatio === 2) {
    if(checkMaxAnisotropy() < 4) {
      iPadVersion = 3;
    } else {
      iPadVersion = 4;
    }
  }
  return iPadVersion;
}


/* BONUS CODE 
   isSmartDevice() - Detect most mobile devices
   isOldDevice() - Detect older devices that have poor video card performance
*/

function isSmartDevice( $window ) {
  var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera;
  return (/iPhone|iPod|iPad|Silk|Android|BlackBerry|Opera Mini|IEMobile/).test(ua);
}

function isOldDevice() {
  if(isSmartDevice(window) && window.devicePixelRatio === 1 && checkMaxAnisotropy() < 4 || isiPad( window ) && checkMaxAnisotropy() < 4) {
    return true;
  } else {
    return false;
  }
}


alert('iPad Version: ' + getiPadVersion(window) );

#webGLCanvasTest {
  width: 1px;
  height: 1px;
  position: fixed;
  top: -1px;
  left: -1px;
}

<!-- Device Testing Canvas, Hide This Somewhere -->
<canvas id="webGLCanvasTest"></canvas>

As others have already pointed out, these are the 2 useragent currently in use:

iPad:
　Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5

iPad2:
　Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

But if you look close enough, they are not the same, there's a difference:

• iPad has "Mobile/8F190"
• iPad 2 has "Mobile/8F191"

So, there you go.

The user agent detection gets you the version of the Safari app, not the version of the iPad itself because your web app will only run in the browser environment.

The gyroscope and all other API's are SDK API's so they are only available for native app development, not for web apps.

looks like the iPad 2 can have the same Mobile/9B176 code than the New iPad. Maybe it's because of an update of iOS?

Here is my full iPad2 user-agent string:

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

I can't check on an updated iPad 3. Could someone please tell me if there is any difference?

(by the way, if you just want to know if the user has a low-res or a high-res iPad, you can use this trick: https://stackoverflow.com/a/10142357/974563 )

PLS DON'T RELY ON User-Agent STRING INTERPRETATION.

This is not reliable at all: I can see Mobile/8J2 on iPad2 and Mobile/9A405 on iPad1. So different iOS versions(and thus Safari) alert different UA on the same iPad version.

We should go with acceleration feature detection only; either client-side or server-side (WURFL acceleration etc...).

How about:

// For use within normal web clients 
var isiPad = navigator.userAgent.match(/iPad/i) != null;

// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

Also, check out this:

http://davidwalsh.name/detect-ipad