How to detect if your device is an iPad3 or 4 using jQuery or javascript?

Question

I've been searching for some ways to detect the iPad3 and iPad4 devices. I'm adding meta viewport dynamically. I wanted to see desktop version and remove the viewport in Desktop , iPad3 & iPad4 but in mobile of course add viewport to see mobile version.

Please Check my init function in var ApplyViewPort:

var deviceDetection = function () { 
var osVersion, 
device, 
deviceType, 
userAgent, 
isSmartphoneOrTablet; 

device = (navigator.userAgent).match(/Android|iPhone|iPad|iPod/i); 

if ( /Android/i.test(device) ) { 
    if ( !/mobile/i.test(navigator.userAgent) ) { 
        deviceType = 'tablet'; 
    } else { 
        deviceType = 'phone'; 
    } 

    osVersion = (navigator.userAgent).match(/Android\s+([\d\.]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace('Android ', ''); 

} else if ( /iPhone/i.test(device) ) { 
    deviceType = 'phone'; 
    osVersion = (navigator.userAgent).match(/OS\s+([\d\_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 

} else if ( /iPad/i.test(device) ) { 
    deviceType = 'tablet';
    osVersion = (navigator.userAgent).match(/OS\s+([\d\_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 
}

isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); 
userAgent = navigator.userAgent; 

return { 'isSmartphoneOrTablet': isSmartphoneOrTablet, 
         'device': device, 
         'osVersion': osVersion, 
         'userAgent': userAgent, 
         'deviceType': deviceType
        }; 
}();

var ApplyViewPort = {

    init: function() {
        this.metaView   = '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />';
        /// Preppend a meta viewport if it's not yet preppended
        /// Else remove the meta viewport
        if (deviceDetection.deviceType == 'tablet') {
            $('meta[name="viewport"]').remove();

            if (window.devicePixelRatio == 2) {
                $('meta[name="viewport"]').remove();
            }

        } else {
            $('head').append(this.metaView);
        }

    }
}

$(document).ready(function() {
    ApplyViewPort.init();

});

Answer 1

http://docs.phonegap.com/en/3.0.0rc1/cordova_device_device.md.html#Device try this one is having device.model; which will give you exact ipad version but you need to use phonegap higher version only

Answer 2

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>