모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)

亚连

May 31, 2018 am 10:33 AM

javascript

이 글에서는 주로 모바일 기기 모델을 얻기 위한 JavaScript 구현 코드를 소개합니다. 필요한 친구는 참고해도 됩니다.

우리는 일반적으로 User Agent 필드를 통해 브라우저에서 사용자의 액세스 장치를 식별하지만 이를 통해서는 일반적인 정보만 제공합니다. Mac을 사용하는지 Windows를 사용하는지, iPhone을 사용하는지 iPad를 사용하는지 등을 알 수 있습니다. 어떤 세대의 iPhone을 사용하고 있는지 알고 싶으면 이 방법이 작동하지 않습니다. 얼마 전에 모바일 클라이언트(주로 iOS 장치)의 특정 모델을 식별해야 하는 경우가 있어서 구현에 대해 생각했습니다. 이 문제의.

우선 다들 그렇듯 UA를 생각했는데 이 길이 안 되더라구요. 브라우저의 API를 하나씩 조작하는 것이 지루할 때 갑자기 기사의 특정 코드가 생각났습니다. 이 글에서는 js를 통해 그래픽 장치 정보를 얻는 방법에 대해 설명합니다. HTML5는 캔버스를 지원하므로 그래픽 카드의 모델과 같은 그래픽 장치의 모델을 API를 통해 얻을 수 있습니다.

(function () {
  var canvas = document.createElement(&#39;canvas&#39;),
    gl = canvas.getContext(&#39;experimental-webgl&#39;),
    debugInfo = gl.getExtension(&#39;WEBGL_debug_renderer_info&#39;);

  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(&#39; or &#39;));</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(&#39;canvas&#39;);
    }

    return canvas;
  }

  function getGl() {
    if (gl == null) {
      gl = getCanvas().getContext(&#39;experimental-webgl&#39;);
    }

    return gl;
  }

  function getScreenWidth() {
    return Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1);
  }

  function getGlRenderer() {
    if (glRenderer == null) {
      debugInfo = getGl().getExtension(&#39;WEBGL_debug_renderer_info&#39;);
      glRenderer = debugInfo == null ? &#39;unknown&#39; : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
    }

    return glRenderer;
  }

  function getModels() {
    if (models == null) {
      var device = devices[getGlRenderer()];

      if (device == undefined) {
        models = [&#39;unknown&#39;];
      } else {
        models = device[getScreenWidth()];

        if (models == undefined) {
          models = [&#39;unknown&#39;];
        }
      }
    }

    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 10_2_1< ;/span> Mac OS와 유사 /span> m1 metal Build/LMY47I) AppleWebKit/537.36(KHTML, 유사 Gecko) 버전/4.0 Chrome/40.0.2214.127 Mobile Safari/ 537.36

3, Samsung
Mozilla/5.0(Linux; Android 6.0.1; < ;span style="color:#3366ff;"> SM-A8000 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; Android 6.0.1 Redmi 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( 
  &#39;Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i&#39; + 
  &#39; Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)&#39; + 
  &#39; Version/4.0 Mobile Safari/534.30&#39;); 
 
// more typically we would instantiate with &#39;window.navigator.userAgent&#39; 
// as user-agent; this string literal is only for better understanding 
 
console.log( md.mobile() );     // &#39;Sony&#39; 
console.log( md.phone() );      // &#39;Sony&#39; 
console.log( md.tablet() );     // null 
console.log( md.userAgent() );    // &#39;Safari&#39; 
console.log( md.os() );       // &#39;AndroidOS&#39; 
console.log( md.is(&#39;iPhone&#39;) );   // false 
console.log( md.is(&#39;bot&#39;) );     // false 
console.log( md.version(&#39;Webkit&#39;) );     // 534.3 
console.log( md.versionStr(&#39;Build&#39;) );    // &#39;4.1.A.0.562&#39; 
console.log( md.match(&#39;playstation|xbox&#39;) ); // 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

上面是我整理给大家的，希望今后会对大家有帮助。

JavaScript实现区块链

iview table render集成switch开关的实例

解决Vue.js 2.0 有时双向绑定img src属性失败的问题

위 내용은 모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7698

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

JavaScript 및 WebSocket: 효율적인 실시간 이미지 처리 시스템 구축 Dec 17, 2023 am 08:41 AM

JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어인 반면 WebSocket은 실시간 통신에 사용되는 네트워크 프로토콜입니다. 두 가지의 강력한 기능을 결합하면 효율적인 실시간 영상 처리 시스템을 만들 수 있습니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 이 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 첫째, 실시간 영상처리 시스템의 요구사항과 목표를 명확히 할 필요가 있다. 실시간 이미지 데이터를 수집할 수 있는 카메라 장치가 있다고 가정해 보겠습니다.

See all articles

모바일 장치 모델을 얻기 위한 JavaScript 구현 코드(휴대폰 모델 및 시스템을 얻기 위한 JS)

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제