모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)
- 亚连원래의
- 2018-05-31 10:33:436891검색
이 글에서는 주로 모바일 기기 모델을 얻기 위한 JavaScript 구현 코드를 소개합니다. 필요한 친구는 참고해도 됩니다.
우리는 일반적으로 User Agent 필드를 통해 브라우저에서 사용자의 액세스 장치를 식별하지만 이를 통해서는 일반적인 정보만 제공합니다. Mac을 사용하는지 Windows를 사용하는지, iPhone을 사용하는지 iPad를 사용하는지 등을 알 수 있습니다. 어떤 세대의 iPhone을 사용하고 있는지 알고 싶으면 이 방법이 작동하지 않습니다. 얼마 전에 모바일 클라이언트(주로 iOS 장치)의 특정 모델을 식별해야 하는 경우가 있어서 구현에 대해 생각했습니다. 이 문제의.
우선 다들 그렇듯 UA를 생각했는데 이 길이 안 되더라구요. 브라우저의 API를 하나씩 조작하는 것이 지루할 때 갑자기 기사의 특정 코드가 생각났습니다. 이 글에서는 js를 통해 그래픽 장치 정보를 얻는 방법에 대해 설명합니다. HTML5는 캔버스를 지원하므로 그래픽 카드의 모델과 같은 그래픽 장치의 모델을 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의 모델을 식별하여 장치의 모델을 식별한다는 내 생각을 아실 것입니다.
그러나 작은 결함이 있습니다. 일부 장치는 동일한 세대입니다. 즉, iPhone 6s, iPhone 6s Plus 및 iPhone SE와 같이 GPU 모델이 완전히 동일합니다. 모두 Apple A9 GPU를 사용하는데 어떻게 구별하나요? 두 제품의 가장 큰 차이점은 해상도가 아니라는 사실을 알게 되셨나요? JavaScript를 통해 화면 해상도를 쉽게 얻을 수 있으므로 두 가지 방법을 결합하면 장치의 정확한 모델을 얻을 수 있습니다.
여기 URL 예시가 있습니다. 휴대폰으로 접속하실 수 있습니다
https://joyqi.github.io/mobile-device-js/example.html
내 코드는 모두 GitHub에 있습니다
https://github .com/joyqi/mobile-device-js
이러한 생각은 문제 해결에 대한 영감을 주었습니다. 솔루션을 생각할 때 우리는 외부에서 새로운 발견을 할 수도 있습니다. 예를 들어, 우리 코드는 현재 동일한 세대의 iPad Air와 iPad mini를 식별할 수 없습니다. GPU와 해상도가 동일하기 때문입니다. 그러나 이 아이디어를 이어갈 수 있는 솔루션이 많이 있습니다. 이 번호는 JS:P
Complete test code
<html>
<head>
<title>Mobile Device Example</title>
<script src="./device.js"></script>
</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)"],
2732: ["iPad Pro (12.9-inch)"]
},
"Apple A10 GPU": {
1334: ["iPhone 7"],
2001: ["iPhone 7 Plus"]
}
};
function getCanvas() {
if (canvas == null) {
canvas = document.createElement('canvas');
}
return canvas;
}
function getGl() {
if (gl == null) {
gl = getCanvas().getContext('experimental-webgl');
}
return gl;
}
function getScreenWidth() {
return Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1);
}
function getGlRenderer() {
if (glRenderer == null) {
debugInfo = getGl().getExtension('WEBGL_debug_renderer_info');
glRenderer = debugInfo == null ? 'unknown' : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
}
return glRenderer;
}
function getModels() {
if (models == null) {
var device = devices[getGlRenderer()];
if (device == undefined) {
models = ['unknown'];
} else {
models = device[getScreenWidth()];
if (models == undefined) {
models = ['unknown'];
}
}
}
return models;
}
if (window.MobileDevice == undefined) {
window.MobileDevice = {};
}
window.MobileDevice.getGlRenderer = getGlRenderer;
window.MobileDevice.getModels = getModels;
})();
JS를 통해 전화 모델과 시스템을 확인할 수도 있습니다
js를 통해 휴대폰의 일부 기본 매개변수를 얻으려면 navigator.userAgent를 사용해야 하며 이를 통해 브라우저의 일부 기본 정보를 얻을 수 있습니다. 페이지에서 navigator.userAgent의 내용을 보려면 document.write(navigator.userAgent)를 사용하여 페이지에 인쇄하면 특정 내용을 더 명확하게 볼 수 있습니다.
1. 제가 인쇄한 일부 휴대폰의 userAgent 내용은 다음과 같습니다.
1.iphone6 plus
Mozilla/5.0 (iPhone; CPU iPhone OS a80cef128d8e145f6c8ee3fc2423b6bb10_2_1< ;/span> Mac OS와 유사 /span> 23b116612d380f011eb8a2f2f43b221dm1 metal54bdf357c58b8a65c66d7c19c8e4d114 Build/LMY47I) AppleWebKit/537.36(KHTML, 유사 Gecko) 버전/4.0 Chrome/40.0.2214.127 Mobile Safari/ 537.36
3, Samsung
Mozilla/5.0(Linux; a80cef128d8e145f6c8ee3fc2423b6bbAndroid 6.0.154bdf357c58b8a65c66d7c19c8e4d114; < ;span style="color:#3366ff;"> SM-A800054bdf357c58b8a65c66d7c19c8e4d114 Build/MMB29M; wv) AppleWebKit/537.36(KHTML, like Gecko) 버전/4.0 Chrome/55.0.2883.91 모바일 Safari/537.36
4 、Xiaomi
Mozilla/5.0(Linux; 0514c41975849410474510505e33af80Android 6.0.154bdf357c58b8a65c66d7c19c8e4d114 23b116612d380f011eb8a2f2f43b221dRedmi Note 4X< /span> Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36
위에서 iPhone 필드에 iPhone 필드가 포함되어 있음을 알 수 있습니다. 버전 필드는 위에서 빨간색으로 표시되어 있습니다. 2, 3, 4는 여러 안드로이드 휴대폰의 userAgent 내용이다. 잘 관찰해 보면 안드로이드 5.1 등이 시스템 버전이라는 것을 어렵지 않게 알 수 있다. 파란색은 휴대폰 모델입니다. 브라우저 버전 등을 포함한 기타 콘텐츠에 대해서는 여기서 설명하지 않습니다. 이 userAgent 콘텐츠의 구체적인 의미와 소스를 알고 싶다면 다음 주소를 참조하여 자세한 설명을 참조하세요.
모든 브라우저의 userAgent가 Mozilla와 함께 제공되는 이유
2、在网上查了下有木有现成的js能直接实现此功能，找到了一个mobile-detect.js。基本可以实现我们需要的参数，下载地址：
https://github.com/hgoebl/mobile-detect.js/
文档地址：
http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html
使用方法：
var md = new MobileDetect( 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' + ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' + ' Version/4.0 Mobile Safari/534.30'); // more typically we would instantiate with 'window.navigator.userAgent' // as user-agent; this string literal is only for better understanding console.log( md.mobile() ); // 'Sony' console.log( md.phone() ); // 'Sony' console.log( md.tablet() ); // null console.log( md.userAgent() ); // 'Safari' console.log( md.os() ); // 'AndroidOS' console.log( md.is('iPhone') ); // false console.log( md.is('bot') ); // false console.log( md.version('Webkit') ); // 534.3 console.log( md.versionStr('Build') ); // '4.1.A.0.562' console.log( md.match('playstation|xbox') ); // false
使用过程中ios没有什么问题，想获取的都可以获取到，不过Android并不是都能获取到。所以又对Android的做了单独处理。发现Android手机型号后面都带了一段Build/...。所以就以此做了下单独处理，来获取Android手机型号。下面是具体代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>JS获取手机型号和系统</title>
</head>
<body>
</body>
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/lib/mobile-detect.min.js"></script>
<script>
//判断数组中是否包含某字符串
Array.prototype.contains = function(needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = navigator.userAgent;//获取userAgent信息
document.write(device_type);//打印到页面
var md = new MobileDetect(device_type);//初始化mobile-detect
var os = md.os();//获取系统
var model = "";
if (os == "iOS") {//ios系统的处理
os = md.os() + md.version("iPhone");
model = md.mobile();
} else if (os == "AndroidOS") {//Android系统的处理
os = md.os() + md.version("Android");
var sss = device_type.split(";");
var i = sss.contains("Build/");
if (i > -1) {
model = sss[i].substring(0, sss[i].indexOf("Build/"));
}
}
alert(os + "---" + model);//打印系统版本和手机型号
</script>
</html>
得到结果：
iphone iOS10.21---iPhone
android AndroidOS6.01---Redmi Note 4X
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
iview table render集成switch开关的实例
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
위 내용은 모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!