この記事では、モバイルデバイスモデルを取得するための JavaScript の実装コードを主に紹介します。必要な友人はそれを参照してください。
通常、ユーザーエージェントフィールドを通じてブラウザーでユーザーのアクセスデバイスを識別しますが、それを通じて私たちは一般的な情報のみを取得します。 Mac か Windows か、iPhone か iPad かなどを取得できます。使用している iPhone の世代を知りたい場合、この方法は機能しません。少し前に、たまたまモバイル クライアント (主に iOS デバイス) の特定のモデルを識別する必要があったので、その実装を考えました。この問題の。
まず、他の皆さんと同じように、私も UA を考えましたが、この道はうまくいかないことがわかりました。ブラウザの API を 1 つずついじるのにうんざりしていたとき、突然、記事内の特定のコードを思い出しました。この記事では、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 のモデルを識別することでデバイスのモデルを識別するという私の考えが理解できるはずです。
ただし、一部のデバイスは同じ世代、つまり、iPhone 6s、iPhone 6s Plus、iPhone SE など、GPU モデルがまったく同じです。これらはすべて Apple A9 GPU を使用していますが、それらを区別するにはどうすればよいですか?それらの最大の違いは解像度であることがわかります。 JavaScript を使用すると画面の解像度を簡単に取得できるため、2 つの方法を組み合わせることでデバイスの正確なモデルを取得できます。
ここに URL の例を示します。携帯電話からアクセスできます
https://joyqi.github.io/mobile-device-js/example.html
私のコードはすべて GitHub にあります
https://github .com/joyqi/mobile-device-js
この考えは、問題を解決するためのインスピレーションを与えてくれました。解決策を考えるとき、側面から新しい発見があるかもしれません。たとえば、現在のコードでは、GPU と解像度が同じであるため、同世代の iPad Air と iPad mini を識別できません。ただし、このアイデアを継続するための解決策は数多くあります。たとえば、これら 2 つのマイクの数を検討することができます。この番号は、JS:P
完全なテスト コード
<html>
<head>
<title>Mobile Device Example</title>
<script src="./device.js"></script>
</head>
<head>
<h1 id="GPU-nbsp-script-document-write-MobileDevice-getGlRenderer-script">GPU: <script>document.write(MobileDevice.getGlRenderer());</script></h1>
<h1 id="Device-nbsp-Models-nbsp-script-document-write-MobileDevice-getModels-join-nbsp-or-nbsp-script">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 2、在网上查了下有木有现成的js能直接实现此功能，找到了一个mobile-detect.js。基本可以实现我们需要的参数，下载地址： https://github.com/hgoebl/mobile-detect.js/ 文档地址： http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html 使用方法： 使用过程中ios没有什么问题，想获取的都可以获取到，不过Android并不是都能获取到。所以又对Android的做了单独处理。发现Android手机型号后面都带了一段Build/...。所以就以此做了下单独处理，来获取Android手机型号。下面是具体代码： 得到结果： iphone iOS10.21---iPhone android AndroidOS6.01---Redmi Note 4X 上面是我整理给大家的，希望今后会对大家有帮助。 相关文章： iview table render集成switch开关的实例 解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 Mac OS と同様 /span> m1 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; SM-A8000 wv) AppleWebKit/537.36 (Gecko のような KHTML) バージョン/4.0 Chrome/55.0.2883.91 モバイル Safari/537.36
4 、Xiaomi
Mozilla/5.0 (Linux; Android 6.0.1; Redmi Note 4X Build/MMB29M; wv) AppleWebKit/537.36 (KHTML、Gecko など) バージョン/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36
上記から、iPhone フィールドとシステムが含まれていることがわかります。バージョンフィールドは上で赤色でマークされています。 2、3、4 は、いくつかの Android 携帯電話の userAgent の内容です。注意深く観察すると、Android 5.1 などがシステム バージョンであることがわかります。青いのは携帯電話のモデルです。ブラウザ版などその他のコンテンツについては、ここでは説明を省略します。この userAgent コンテンツの具体的な意味とソースを知りたい場合は、次のアドレスで詳しい説明を参照してください:
なぜすべてのブラウザの userAgents には Mozilla が付属しているのですか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
<!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>
以上が携帯電話の機種を取得するJavaScriptの実装コード（携帯電話の機種とシステムを取得するJS）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7686
15163914139352128725122929