JavaScript を使用してモバイル ブラウザを検出する方法

モバイル検出は、常にアプリ開発の重要な側面です。 これは、アプリだけでなく、ソフトウェアと Web サイトの両方にも関連しています。 モバイル ブラウザ エージェントをチェックする理由は無数にあります。 最も重要なのは、独自のユーザー エクスペリエンスを提供できることです。

UAParser.js ライブラリだけでも、毎週何百万ものパッケージがダウンロードされます。 そして、ほとんどの場合、ゼロから何かを構築する場合はそれで十分です。 しかし、JavaScript を使用してモバイル ブラウザーを検出する別の方法についてはどうでしょうか。

場合によっては、ライブラリを使用せずにジョブを実行する単純なソリューションが必要になることがあります。 この記事では、モバイル ユーザーを検出するための JavaScript 手法をいくつか紹介します。 見逃した場合はお知らせください。

navigator.userAgent

ブラウザー検出の聖杯は、navigator.UserAgent プロパティです。

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

もちろん、これは非常に原始的な方法です。 User-Agent プロパティは偽装できるため、簡単に操作できます。 しかし、それは仕事をするので、さまざまなプロジェクトで引き続き使用できます。 例: ランディング ページやモバイル バージョンへのカスタム リダイレクト。

navigator.userAgentを使用してブラウザーの種類を検出し、特定のブラウザーに基づいてコンテンツを表示する方法は?

Chrome や Firefox (この場合は Android や iPhone) などの特定のブラウザーを検出し、そのデータを使用して特定のコンテンツを表示するという、独自のユース ケースがあるかもしれません。 このアプローチは、特定のブラウザのダウンロード リンクを提供/変更するためによく使用されます。

そんな時は以下の機能が使えます。

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

チェックしたくないブラウザーのさまざまなelse ifステートメントをコメントアウトすることができます。同様に、チェックしたいブラウザーを追加することもできます。

TouchEvent

モバイル ユーザーを検出する 1 つの方法は、デバイスにタッチ スクリーンがあるかどうかを確認することです。

GlobalEventHandlers.ontouchstart プロパティを使用すると、ユーザーがアプリをどのように操作したかを簡単に確認できます。 インタラクションがタッチ スクリーンから発生した場合は、アプリまたはページのモバイル バージョンを返すことができます。

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Surface などのタッチ スクリーン デバイスには、このプロパティがありません。 そのため、デスクトップ ベースのタッチ デバイスからアクセスしているユーザーには、引き続きデスクトップ バージョンのページが表示されます。

Window.matchMedia()

Window.matchMedia() は、JavaScript を使用してモバイル ユーザーを検出するのに最適なプロパティの 1 つです。 これは、CSS を直接操作できるためです。

多くの場合、モバイル検出ツールが組み込まれているメディア クエリの方が優れています。 たとえば、 「pointer:coarse」が true かどうかを確認する呼び出しを行うことができます。

この特定のステートメントは、デバイスのポインターが細かいか粗いかを検証します。

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

または、デバイスに細かいポインターと粗いポインターの両方がある場合があります。 このユースケースでは、ポインターが粗いかどうかを確認できます。

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

これはクエリを true または false として検証するだけであることに注意してください。 モバイル デバイスを確認するより洗練された方法は、メディア クエリを直接使用することです。

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

このクエリは、デバイスの最大幅を直接チェックし、基準に一致するかどうかをアサートします。 繰り返しますが、これはすべてのデバイスを正しく取得するためのかなりの作業です。 そのため、すべてのデバイス タイプが定義済みのビルド済みライブラリを使用する方が簡単です。

特定の状況で役立つ

長年にわたり、デバイスの種類を検出するための JavaScript プロパティが数多くありました。 それらの多くは非推奨になりましたが、他のほとんどはライブラリに統合されました。 これは、適切なモバイル検出を行うための最良の方法でもあります.

最後になりましたが、最新のフレームワークのほとんどには、フレームワーク自体の一部としてモバイル検出が既に含まれています。 すべての面倒な作業をしたくない場合は、検討する価値があります。

モバイル デバイスを検出するためのライブラリ

このセクションでは、モバイル デバイスを検出するための最も一般的な JavaScript ライブラリをリストします。 繰り返しますが、これらは JavaScript に固有のものであることを強調します。 アプリでの適切な実装については、ドキュメントを参照してください。

UAParser.js

完全なライブラリに関する限り、UAParser が最高です。 npm だけで毎週 1,000 万回以上ダウンロードされている UAParser は、モバイル デバイスを検出するためのデファクト ソリューションです。 名前からわかるように、ライブラリは User-Agent 文字列を解析することで機能します。

ただし、これが非常に人気のある理由は、何百ものデバイスのバリエーションを解析できるという事実です。 そして、それはすべて非常によく文書化されています。 実用的なデバイス ベンダーから、CPU アーキテクチャなどのより複雑な検出パターンに移行できます。

mobile-detect.js

これは、Heinrich Goebl によってコミュニティに提供された、PHP 用の Mobile Detect ライブラリのかなり単純なポートです。 ライブラリ自体は検出に User-Agent を使用するため、前に説明したように、最適なオプションではありません。

それでも、実用的な HTML テンプレートやポートフォリオ プロジェクトに関しては、十分に機能するはずです。

isMobile

ここでは、Kai Mallea による User-Agent Navigator プロパティの別の解​​釈を示します。 まだ単純なソリューションですが、isMobile がさまざまな仕様を提供している点が気に入っています。 たとえば、任意のモバイル デバイス、または電話やタブレットなどの特定のデバイスをテストできます。

反応デバイス検出

あなたは React.js 開発者ですか?

それなら、Michael Laktionov のこのライブラリが最適です。 期待どおりに動作します。最初にライブラリがデバイス タイプを検出し、次にそのタイプに基づいてビューをレンダリングします。 コンポーネント統合で問題なく動作し、API 呼び出しを介してさらにカスタマイズできます。

興味深い事実の 1 つは、このライブラリに含まれるセレクタの数です。 スマート TV、ウェアラブル、さまざまな iPhone デバイスなどのデバイスをカバーしています。 これにより、特定のデバイス向けのアプリを構築する際に、幅広いデザインの選択肢が得られます。