JavaScript・jQueryでスマホやタブレットを判定する正しい方法を解説【2024年最新】

JavaScript か jQuery で、Webページのアクセスに利用されたデバイスがスマホなのかタブレットなのかPCなのかを判定したいという場合はそれぞれ下記のようなコードを記述すればOKです。

（実際に使用する際は、読み込んでいる.jsファイルもしくは<script>タグの中に記述する必要があります）

JavaScript

const ua = navigator.userAgent;
if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
    // スマートフォン
    alert('スマートフォンやで');
} else if (ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) {
    // タブレット
    alert('タブレットやで');
} else {
    // PC
    alert('PCやで');
}

jQuery

$(function () {
    const ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
        // スマートフォン
        alert('スマートフォンやで');
    } else if (ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) {
        // タブレット
        alert('タブレットやで');
    } else {
        // PC
        alert('PCやで');
    }
})

見ていただくとわかる通り、両方とも同じ書き方でOKです。
実際に動作するところを確認したい場合は↓のリンクからどうぞ！

デモ（JSFiddleに移動します)

参考になったらはてブとかSNSシェアしてもらえると嬉しい！

はてブ
Twitter
Facebook

基本的には上記のコードをそのままコピペしてもらえればいいんですが、
「仕組みをしっかり理解したい」「もっと便利なカスタマイズが知りたい」という方はぜひこのまま続きをお読みください〜

スマホやタブレットを判定するにはUserAgent(ユーザーエージェント)を確認するとよい

Webページのリクエスト時にサーバー側に送信される情報の中には、利用しているデバイス（PC、スマホなど）によって異なる、UserAgent(ユーザーエージェント)と呼ばれるデータが含まれています。

ユーザーエージェントは下記のコードで取得できます。

const ua = navigator.userAgent;

このuaという変数の中身を見てみると、
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
というような文字列が入っています。

使用しているデバイスがiPhoneならユーザーエージェント文字列の中にiPhoneという文字が含まれますし、AndroidならAndroidという文字が含まれてきます。

これを利用すればアクセスしてきたユーザーのデバイスが判別できるというわけです。

var ua1 = window.navigator.userAgent; // windowがついたけど完全に同じ結果
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

var ua2 = navigator.userAgent.toLowerCase(); // すべて小文字に変換した結果が得られます
// "mozilla/5.0 (iphone; cpu iphone os 11_0 like mac os x) applewebkit/604.1.38 (khtml, like gecko) version/11.0 mobile/15a372 safari/604.1"

スマホなのかタブレットなのかを判定するロジックについて

先ほど書いたとおり、UserAgent文字列に特定の文字列が含まれるかどうかで判定します。

下記のように.indexOf()メソッドを使用することで、

• 特定の文字が含まれている場合は、それが何文字目かを表す数値が
• 特定の文字が含まれていない場合は-1が

それぞれ得られます。

// iPhone でアクセスした場合
const ua = navigator.userAgent;
console.log(ua.indexOf('iPhone')); // 13
console.log(ua.indexOf('Android')); // -1

必ず-1か0以上の数値が返ってきますので、.indexOf()メソッドの結果が-1より大きいかどうかで条件分岐すればOKです。

今回はiPhoneかAndroidならスマホという基準にしています。
（Windows Phoneとかいうのもあるみたいですが、大分レアな存在のようなので。。）

const ua = navigator.userAgent;
if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
    // スマートフォン
    alert('スマートフォンやで');
}}

Androidの場合は、Mobileという文字列も含まれていないといけないことに注意です。
（Androidタブレットを考慮する）

const ua = 'iPhone xxx xxxxx xxx';
console.log(ua.indexOf('iPhone')); // 0

 
また、今回は.indexOf()メソッドを使用していますが、.search()メソッドや.matchメソッドを使用してもOKです。
コード量も少し減らせるので、正規表現が理解できている場合はおすすめです。

便利なカスタマイズを紹介

①変数に格納していつでも呼べるようにする

• スマホの場合はAという処理をする
• タブレットの場合はBという処理をする
• PCの場合はCという処理をする

というコードになった場合に、それぞれの処理が少なければ冒頭で紹介したコードのままで問題ないと思うのですが、
それぞれの処理がある程度のボリュームになる場合はコードの見通しが悪くなりがちなので、結果を変数に格納してしまうことを推奨します。

具体的には下記のような感じです。

const ua = navigator.userAgent;
const isSp = (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1));
const isTablet = (ua.indexOf('iPad') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') == -1));
const isPc = (! isSp && ! isTablet);

if (isSp) {
    // スマホの処理
}
if (isTablet) {
    // タブレットの処理
}
if (isPc) {
    // PCの処理
}

こうしておくことで、例えばPCだったら特に処理することがない場合などは早期リターンしてしまえるようになりますね。

②コード量を少し短縮する

こちらは少しマニアックなのですが、 > -1と比較する部分は短縮可能です。

const ua = navigator.userAgent;
if (~ ua.indexOf('iPhone') || (~ ua.indexOf('Android') && ~ ua.indexOf('Mobile'))) {
    // スマートフォン
    alert('スマートフォンやで');
}}

上記のように記述しても同じ結果になりますので、若干のコード量短縮となります。
ちなみに~はビット反転を意味しますが、詳しくは別途ググっていただきたいですｗ

知らない人が見たときに混乱する可能性があるので、基本的には推奨しません。

注意点など

最後に注意すべき点について紹介して終わります。

あくまでページ読み込み時のUserAgentを取得している

年のための補足程度になりますが、今回のコードはリアルタイムでUserAgentの変化を検知するものではありません。
Chromeの検証ツールなどでデバイスを切り替えながら実行すると期待する結果が得られなくなります。

あまりないケースなので考慮しなくていいことがほとんどだとは思いますが、一応CSSのメディアクエリーと組み合わせれば画面サイズの変化をリアルタイムで検知できますので、スマホやタブレットの判定を行うことが可能になります。

便利そうなプラグインも存在するけど

先人が作ってくれた判定用のプラグインもあるにはあります。
Github – UserAgentChecker.js

ですが、今回のような判定程度の軽微なロジックであれば自力でコーディングしてしまった方が管理・改修などしやすいですし、なにより成長にも繋がります。

以上です。

参考になったらはてブとかSNSシェアしてもらえると嬉しい！

はてブ
Twitter
Facebook

⬇おすすめのプログラミング塾はこちら
tecth boost（公式サイト）
RUNTEQ（公式サイト）