JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでモバイルブラウザを検出する方法【サンプルコード付き】

WebサイトやWebアプリを開発していると、アクセスしてきたユーザーがスマートフォンやタブレットといったモバイルデバイスを使っているのか、それともPCから閲覧しているのかを判別したい場面があります。JavaScriptでは、navigator.userAgent(ユーザーエージェント)と正規表現を組み合わせることで、モバイルブラウザを簡単に検出できます。

モバイルブラウザ検出の仕組み

すべてのブラウザは、自分自身の情報を「ユーザーエージェント(UA)」という文字列として持っています。この文字列にはOSやデバイスの種類に関する情報が含まれるため、「iPhone」「iPad」「iPod」「Android」といったキーワードが含まれているかを正規表現でチェックすれば、モバイルデバイスかどうかを判定できます。

サンプルコード

以下は、ボタンをクリックするとアクセス中のデバイスがモバイルかどうかを判定して画面に表示する、完全なHTMLコードの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>モバイルブラウザの検出</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>モバイルブラウザの検出</h1>
<div class="sample"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、モバイルデバイスかどうかが表示されます</h3>
<script>
let fillEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
// ユーザーエージェントにモバイル端末のキーワードが含まれるか正規表現で判定
var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (checkMobile) {
fillEle.innerHTML = "これはモバイルデバイスです";
} else {
fillEle.innerHTML = "これはモバイルデバイスではありません";
}
});
</script>
</body>
</html>

コードのポイント解説

判定処理の中核となっているのは、次の1行です。

var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  • navigator.userAgent: ブラウザが保持するユーザーエージェント文字列を取得します。
  • /iPhone|iPad|iPod|Android/i: 主要なモバイル端末のキーワードに一致する正規表現です。末尾の「i」フラグにより、大文字・小文字を区別せずに判定します。
  • test()メソッド: 文字列がパターンに一致すればtrue、一致しなければfalseを返します。

判定結果に応じて、innerHTMLを使って結果メッセージを画面に表示しています。

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

JavaScriptでモバイルブラウザを検出する方法【サンプルコード付き】

「ここをクリック」ボタンを押すと、判定結果が表示されます。

JavaScriptでモバイルブラウザを検出する方法【サンプルコード付き】

注意点と補足

  • iPadOS 13以降のiPadは、既定でデスクトップ版Safariと同じユーザーエージェントを返すため、「iPad」という文字列が含まれないケースがあります。「Macintosh」+タッチ操作対応の組み合わせなども併せて判定すると精度が上がります。
  • ユーザーエージェントはユーザー側で偽装できるため、確実な切り分けにはCSSメディアクエリや画面幅・タッチイベントの有無などを組み合わせるのがおすすめです。
  • 近年ではnavigator.userAgentDataという新しいAPIも登場していますが、対応ブラウザが限られるため、従来のUA判定と併用するのが安全です。
  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptで矢印キーの押下を検出する方法

    JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。サンプルコード以下に具体的な実装例を示します。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8&g