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 gyroscope) 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.
Mozilla/5.0 (iPad; U; CPU iPhone OS 5_1_1 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1.1;FBBV/4110.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/5.1.1;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0] so... this navigator.platform.indexOf("iPad") return true also if it is an iphone or an ipod. :) bye –
Undercoat 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.
Looks like there is a difference between them:
iPad:
Mobile/8F190
iPad 2:
Mobile/8F191
iPad 3:
Mobile/9B176 (according to Philipp)
Mobile/XXXX detecting: it is a Mobile Safari build. iPad3/iOS7 have another. –
Sestet 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:
Detect between iPad 2 and 3 Steps:
Detect between iPad 3 and 4 Steps:
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:
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://mcmap.net/q/1007720/-detect-ipad-3-in-ruby )
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:
© 2022 - 2024 — McMap. All rights reserved.
Mobile/8F190token is incremented by 1 for ipad2? some thing to google for.. – Mythologize