使用JavaScript精确获取移动设备型号

版权申诉

193 浏览量更新于2024-09-12 2 收藏 73KB PDF 举报

"JavaScript获取移动设备型号的实现代码主要依赖于浏览器提供的UserAgent信息和HTML5的Canvas API。虽然UserAgent能提供操作系统和设备类型的基本信息，但它无法精确到具体的设备型号，特别是对于iOS设备。文章提到的方法是利用WebGL扩展`WEBGL_debug_renderer_info`来获取图形处理器（GPU）的型号，因为每一代iOS设备的GPU型号具有差异性。例如，iPhone 6使用A8 GPU，而iPhone 6s和iPhone SE则使用A9 GPU。当GPU型号相同，如iPhone 6s、iPhone 6s Plus和iPhone SE都使用A9 GPU时，可以通过结合JavaScript获取屏幕分辨率来进一步区分这些设备。由于不同设备的屏幕尺寸和分辨率存在差异，将GPU型号与屏幕尺寸信息结合起来，可以更准确地识别设备型号。以下是一个简单的示例代码，用于获取GPU型号： ```javascript (function() { var canvas = document.createElement('canvas'); var gl = canvas.getContext('experimental-webgl'); var debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)); })(); ``` 此代码会在控制台输出GPU的型号。结合屏幕分辨率的获取，可以编写更复杂的逻辑来判断设备的具体型号。有兴趣的读者可以访问示例网址：https://joyqi.github.io/mobile-device-js/exam ，使用移动设备进行测试，以观察实际效果。这种方法对于开发者来说，尤其在需要针对特定设备优化网页或应用时非常有用。"

JavaScript获取移动设备型号的实现代码获取移动设备型号的实现代码(JS获取手机型号和获取手机型号和

系统系统)

主要介绍了JavaScript获取移动设备型号的实现代码,需要的朋友可以参考下

我们一般在浏览器里识别用户的访问设备都是通过 User Agent 这个字段来获取的，但是通过它我们只能获取一个大概的信

息，比如你用的是 Mac 还是 Windows，用的是 iPhone 还是 iPad。如果我想知道你用的是第几代 iPhone，这个方法就不行

了，前段时间我正好有这个需求，识别移动客户端的具体型号（主要是 iOS 设备），于是思考了下这个问题的实现。

首先，我跟大家一样想到了 UA，不过事实证明这路走不通。就在我无聊一个一个摆弄浏览器的 API 时，突然一篇文章里的某

段代码提醒了了我。这篇文章讲的是怎样通过 js 获取图形设备信息的，因为 HTML5 支持了 canvas，所以可以通过 API 获取

图形设备的型号，比如显卡的型号。

(function () {

var canvas = document.createElement('canvas'),

gl = canvas.getContext('experimental-webgl'),

debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));

})();

运行这段代码就可以获取显卡的型号了，如果你在iOS的设备里运行，会获取到诸如 Apple A9 GPU 之类的信息。而我们知道

每一代 iOS 设备的 GPU 型号都是不同的，比如 iPhone 6 是 A8，而 iPhone 6s 就是 A9。看到这里，你应该大概知道我的思

路了，就是通过识别 GPU 的型号来辨别设备的型号。

不过这还有个小瑕疵，有些设备是同一代，也就是 GPU 型号完全相同，比如 iPhone 6s, iPhone 6s Plus, iPhone SE。它们用

的都是 Apple A9 GPU，怎么区分开它们呢？你会发现它们最大的不同不就是分辨率不同吗？而通过 JavaScript 我们又可以方

便地获取屏幕分辨率，这样把两个手段综合应用一下就可以获取设备的准确型号了。

这里有个示例网址，大家可以用手机访问

https://joyqi.github.io/mobile-device-js/example.html

我的代码都放在了 GitHub 上

https://github.com/joyqi/mobile-device-js

这次思考给了我一些解决问题的启发，我们在思考解决方案的时候从侧面入手说不定会有新的发现。就比如我们的这个代码，

目前还无法识别同一代的 iPad Air 和 iPad mini，因为它们的 GPU 和分辨率均相同，但是延续这个思路其实是有很多解决方

案的，比如大家可以研究下这两个设备的话筒和喇叭个数，而这个数量也是可以通过 JS 获取的 :P

完整的测试代码

<html>

<head>

<title>Mobile Device Example</title>

</head>

<head>

<h1>GPU: <script>document.write(MobileDevice.getGlRenderer());</script></h1>

<h1>Device Models: <script>document.write(MobileDevice.getModels().join(' or '));</script></h1>

</head>

</html>

device.js

(function () {

var canvas, gl, glRenderer, models,

devices = {

"Apple A7 GPU": {

1136: ["iPhone 5", "iPhone 5s"],

2048: ["iPad Air", "iPad Mini 2", "iPad Mini 3"]

"Apple A8 GPU": {

1136: ["iPod touch (6th generation)"],

1334: ["iPhone 6"],

2001: ["iPhone 6 Plus"],

2048: ["iPad Air 2", "iPad Mini 4"]

"Apple A9 GPU": {

1136: ["iPhone SE"],

1334: ["iPhone 6s"],

2001: ["iPhone 6s Plus"],

2224: ["iPad Pro (9.7-inch)"],

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38631773

粉丝: 5
资源: 963

使用JavaScript精确获取移动设备型号

非常详细的JS判断浏览器的版本和型号

利用手机在线的api接口通过js获得手机号码归属地数据库

判断iphonex

uniapp获取平板设备型号

html、js获取移动设备标识信息(适用于投票)

js 如何获取移动设备手机里面的几个唯一标识

js 获取移动手机设备的唯一标识

h5获取手机设备唯一信息

js获取手机型号和版本

html 获取移动设备真是像素尺寸

最新资源