JavaScript 中的 iPad 版本检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7400489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad version detection in JavaScript
提问by fbrandel
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.
是否可以在 Web 应用程序中检查 iPad 版本（1 或 2）？由于用户代理看起来相同（参见http://www.webtrends.com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA），浏览器的标准检查在这里不起作用。
Can we check for features (like the gyroscope) in JavaScript which are only available in version 2?
我们可以在 JavaScript 中检查仅在版本 2 中可用的功能（如陀螺仪）吗？
采纳答案by Igor Shastin
Please try this fiddle. It detects version of iPad by gyroscope availability.
请试试这个小提琴。它通过陀螺仪的可用性检测 iPad 的版本。
As you can see in Safari Developer Library, event.accelerationis not null on devices that has a gyroscope. Since iPad 1 doesn't has it, we can assume that this device is iPad 1.
正如您在Safari Developer Library 中看到的那样，event.acceleration在具有陀螺仪的设备上不为空。由于 iPad 1 没有它，我们可以假设这个设备是 iPad 1。
To distinguish iPad 2 from iPad 3, we can check a window.devicePixelRatioproperty, since iPad 3 has Retina display with pixel ratio == 2.
为了区分 iPad 2 和 iPad 3，我们可以检查一个window.devicePixelRatio属性，因为 iPad 3 具有像素比 == 2 的 Retina 显示屏。
回答by u283863
Sorry but currently there is no difference between iPad and iPad 2.
抱歉，目前 iPad 和 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 versionsthere are constantly changingin iOS updates.
并注意在那里，该版本有不断变化中的iOS更新。
UPDATE
更新
Looks like there isa difference between them:
貌似是它们之间的区别：
iPad:
Mobile/8F190
iPad 2:
Mobile/8F191
iPad 3:
Mobile/9B176 (according to Philipp)
回答by Josh Grew
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.
有点晚了，但是通过使用 WEBGL_debug_renderer_info 扩展，它是WebGL API 的一部分，您可以检索 GPU 的供应商和渲染器名称。
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 bloggoes into more detail.
它也可以用于 iPhone 机型，这个博客有更详细的介绍。
回答by Marcus Showalter
Detect between iPad 1 and 2 Steps:
在 iPad 1 和 2 之间检测步骤：
- Check UA String for iPad
- Check for Gyroscope
- 检查 iPad 的 UA 字符串
- 检查陀螺仪
Detect between iPad 2 and 3 Steps:
在 iPad 2 和 3 之间检测步骤：
- Check UA String for iPad
- Check Pixel Density (Retina iPad 3 Displays = 2)
- 检查 iPad 的 UA 字符串
- 检查像素密度（Retina iPad 3 Displays = 2）
Detect between iPad 3 and 4 Steps:
在 iPad 3 和 4 之间检测步骤：
- Check UA String for iPad
- Check Pixel Density (Retina Displays = 2)
- Check the Devices Maximum Anisotropy (iPad 3 = 2, iPad 4 = 16)
- 检查 iPad 的 UA 字符串
- 检查像素密度（Retina Displays = 2）
- 检查设备最大各向异性（iPad 3 = 2，iPad 4 = 16）
Maximum Anisotropy of 16 usually indicates a modern device with decent graphics performance.
最大各向异性 16 通常表示现代设备具有不错的图形性能。
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>回答by njy
As others have already pointed out, these are the 2 useragent currently in use:
正如其他人已经指出的那样，这些是当前使用的 2 个用户代理：
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 notthe same, there's a difference:
但是如果你仔细观察，它们并不相同，它们是有区别的：
- iPadhas "Mobile/8F190"
- iPad 2has "Mobile/8F191"
- iPad有“Mobile/8F190”
- iPad 2有“Mobile/8F191”
So, there you go.
所以，你去了。
回答by Julian Bilcke
looks like the iPad 2 can have the same Mobile/9B176code than the New iPad. Maybe it's because of an update of iOS?
看起来 iPad 2 可以具有与新 iPad相同的Mobile/9B176代码。也许是因为iOS的更新？
Here is my full iPad2 user-agent string:
这是我完整的 iPad2 用户代理字符串：
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
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?
我无法检查更新的 iPad 3。有人可以告诉我是否有任何区别吗？
(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)
（顺便说一句，如果你只是想知道用户是低分辨率还是高分辨率的 iPad，你可以使用这个技巧：https: //stackoverflow.com/a/10142357/974563）
回答by Arman McHitarian
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.
这根本不可靠：我可以在 iPad2 上看到 Mobile/8J2，在 iPad1 上看到 Mobile/9A405。因此，不同的 iOS 版本（以及 Safari）会在同一 iPad 版本上提醒不同的 UA。
We should go with acceleration feature detection only; either client-side or server-side (WURFL accelerationetc...).
我们应该只使用加速度特征检测；客户端或服务器端（WURFL 加速等...）。
回答by Michael
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.
用户代理检测为您提供 Safari 应用程序的版本，而不是 iPad 本身的版本，因为您的 Web 应用程序只能在浏览器环境中运行。
The gyroscope and all other API's are SDK API's so they are only available for native app development, not for web apps.
陀螺仪和所有其他 API 都是 SDK API，因此它们仅可用于本机应用程序开发，不适用于 Web 应用程序。
回答by Shawn Spencer
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:
另外，看看这个：
