当前位置： 文江博客话题详情

JavaScript 中的 iPad 版本检测

发布于 2024-12-04 16:54:42 字数 341 浏览 2 评论 0原文

是否可以在 Web 应用程序中检查 iPad 版本（1 或 2）？由于用户代理看起来相同（请参阅 http://www.webtrends。 com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA）标准通过浏览器检查在这里不起作用。

我们可以检查 JavaScript 中仅在版本 2 中可用的功能（如陀螺仪）吗？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

初见 2024-12-11 16:54:42

请尝试这个小提琴。它通过陀螺仪可用性检测 iPad 的版本。

正如您在 Safari 开发者库中看到的，event.acceleration 在具有陀螺仪的设备上不为空。由于 iPad 1 没有，我们可以假设该设备是 iPad 1。

为了区分 iPad 2 和 iPad 3，我们可以检查 window.devicePixelRatio 属性，因为 iPad 3 具有 Retina 显示屏像素比 == 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.

回复 原文
悲凉≈ 2024-12-11 16:54:42

抱歉，目前 iPad 和 iPad 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

请注意，版本 iOS 更新不断变化。

更新

看起来它们之间有区别：

iPad:
  Mobile/8F190

iPad 2:
  Mobile/8F191

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

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)
回复 原文
紙鸢 2024-12-11 16:54:42

这个有点晚了，但是通过使用 WEBGL_debug_renderer_info 扩展，它是 WebGL 的一部分API，您可以检索GPU的供应商和渲染器名称。

将此与设备的屏幕尺寸相结合，您可以准确地定义它是哪个版本。

// 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";
}
}

它也可以针对 iPhone 型号完成，此博客 进入更多细节。

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.

回复 原文
苦妄 2024-12-11 16:54:42

在 iPad 1 和 2 之间检测 步骤：

  1. 检查 iPad 的 UA 字符串
  2. 检查陀螺仪

在 iPad 2 和 3 之间检测 步骤：

  1. 检查 iPad 的 UA 字符串
  2. 检查像素密度（Retina iPad 3 显示屏 = 2）

在 iPad 3 和 4 之间检测 步骤：

  1. 检查 UA iPad 的字符串
  2. 检查像素密度（Retina 显示屏 = 2）
  3. 检查设备最大各向异性（iPad 3 = 2、iPad 4 = 16）

最大值各向异性为 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>

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>

回复 原文
尘曦 2024-12-11 16:54:42

正如其他人已经指出的那样，这些是当前使用的 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

但是如果您仔细观察，它们不相同，有一个区别：

  • iPad 有“ Mobile/8F190”
  • iPad 2 有“Mobile/8F191”

所以，就这样。

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.

回复 原文
墨洒年华 2024-12-11 16:54:42

用户代理检测会为您提供 Safari 应用程序的版本，而不是 iPad 本身的版本，因为您的 Web 应用程序只能在浏览器环境中运行。

陀螺仪和所有其他 API 都是 SDK API，因此它们仅适用于本机应用程序开发，不适用于 Web 应用程序。

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.

回复 原文
ゃ人海孤独症 2024-12-11 16:54:42

看起来 iPad 2 可以具有与新 iPad 相同的 Mobile/9B176 代码。也许是因为iOS更新了？

这是我完整的 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

我无法检查更新的 iPad 3。有人可以告诉我是否有什么不同吗？

（顺便说一下，如果你只是想知道用户使用的是低分辨率还是高分辨率的 iPad，你可以使用这个技巧：https://stackoverflow.com/a/10142357/974563）

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 )

回复 原文
北凤男飞 2024-12-11 16:54:42

请不要依赖用户代理字符串解释。

这根本不可靠：我可以在 iPad2 上看到 Mobile/8J2，在 iPad1 上看到 Mobile/9A405。因此，不同的 iOS 版本（以及 Safari）会在同一 iPad 版本上提醒不同的 UA。

我们应该只进行加速特征检测；客户端或服务器端（WURFL 加速等... ）。

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...).

回复 原文
始终不够 2024-12-11 16:54:42

怎么样：

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

另外，看看这个：

http://davidwalsh.name/detect-ipad

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

回复 原文
~没有更多了~

关于作者

你的背包

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文