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();

});

dup? http://stackoverflow.com/questions/7400489/ipad-version-detection-in-javascript — Arsen Mkrtchyan, Oct 09 '13 at 07:59
I'm using window.devicePixelRatio inside the detection of tablet. If you did not put it inside in it. it will also affect the mobile version — markvicencio, Oct 09 '13 at 08:01
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 — Rahul, Oct 09 '13 at 08:11
download phonegap or cordova 3.0 version then include in your html thats it and start using. — Rahul, Oct 09 '13 at 09:03

Rahul · Answer 1 · 2013-10-09T08:13:36.310

0

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

edited Oct 09 '13 at 08:13

answered Oct 09 '13 at 08:03

Rahul

710
1
8
25

Already see this doc. But it has no way to detect specifically iPad 3 and 4. thanks for answering – markvicencio Oct 09 '13 at 08:05
how to setup the plugin? – markvicencio Oct 09 '13 at 08:43
download phonegap or cordova 3.0 version then include in your html thats it and start using. – Rahul Oct 09 '13 at 08:46
after downloading where do you save the files? because it has a lot of zip file inside also. folders of different cordova devices – markvicencio Oct 09 '13 at 09:24

Marcus Showalter · Answer 2 · 2016-06-23T21:28:20.060

Detect between iPad 1 and 2 Steps:

Check UA String for iPad
Check for Gyroscope

Detect between iPad 2 and 3 Steps:

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

Detect between iPad 3 and 4 Steps:

Check UA String for iPad
Check Pixel Density (Retina Displays = 2)
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>

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

2 Answers2