jQueryでデバイスを判定する方法完全ガイド｜スマホ・タブレット・タッチ対応まで

スマホとPCで処理を切り替えたい、タッチデバイスのみスワイプを有効にしたい――そんな要件に対応するには「デバイス判定」の実装が必要です。

jQueryでのデバイス判定には主に3つの方法があり、それぞれ特性が異なります。この記事では各方法の使い方と使い分けを、実務で役立つパターンとともに解説します。

方法1: matchMedia（推奨）

window.matchMedia() はCSSのメディアクエリをJavaScriptで評価できるAPIです。画面幅に基づく判定として最も信頼性が高く、現在の標準的な方法です。

$(function () {
  const mq = window.matchMedia("(max-width: 768px)");

  function handleDevice(e) {
    if (e.matches) {
      // スマホ・タブレット幅（768px以下）
      console.log("モバイル表示");
      $(".menu").hide();
      $(".hamburger").show();
    } else {
      // PC幅（769px以上）
      console.log("PC表示");
      $(".menu").show();
      $(".hamburger").hide();
    }
  }

  handleDevice(mq);                           // 初回判定
  mq.addEventListener("change", handleDevice); // リサイズ時にも反応
});

ブレイクポイントの目安：

方法2: userAgent（機種・OS判定に使う）

ブラウザが送信するUser Agent文字列でデバイスのOS・機種を判定します。「iOSのみ特定CSSを適用」などの場面で使います。

$(function () {
  const ua = navigator.userAgent;

  const isIOS     = /iPhone|iPad|iPod/i.test(ua);
  const isAndroid = /Android/i.test(ua);
  const isMobile  = isIOS || isAndroid;
  const isTablet  = /iPad/i.test(ua) || (isAndroid && !/Mobile/i.test(ua));
  const isPC      = !isMobile;

  if (isIOS) {
    $("body").addClass("device-ios");
    console.log("iOS端末");
  } else if (isAndroid) {
    $("body").addClass("device-android");
    console.log("Android端末");
  } else {
    $("body").addClass("device-pc");
    console.log("PC");
  }
});

// iPadOS 13以降の対応: UAがMacのSafariと同じになるため
// navigator.platform + maxTouchPoints で判定する
const isIpadOS = (
  /Mac/i.test(navigator.platform) &&
  navigator.maxTouchPoints > 1
);

if (/iPad/i.test(ua) || isIpadOS) {
  console.log("iPad（iPadOS 13以降を含む）");
}

方法3: window.width（レスポンシブ対応時の補助的な判定）

ウィンドウの幅を数値で取得し、閾値で判定します。matchMedia で十分な場面が多いですが、幅の数値が必要なロジック（例：スライダーのコマ数）に使います。

$(function () {
  function getDeviceType() {
    const w = $(window).width();
    if (w <= 480)  return "smartphone";
    if (w <= 768)  return "tablet";
    return "pc";
  }

  function onResize() {
    const device = getDeviceType();
    $("body").removeClass("device-smartphone device-tablet device-pc")
             .addClass("device-" + device);
    console.log("現在のデバイス:", device);
  }

  onResize();  // 初回
  $(window).on("resize", onResize);
});

// debounce で resize を間引く（300ms後に実行）
function debounce(fn, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

$(window).on("resize", debounce(function () {
  onResize();
}, 300));

タッチデバイスを判定する

スマホ・タブレットなどタッチ操作が可能なデバイスを判定します。マウスとタッチでUIを切り替えるのに使います。

// タッチデバイス判定（複数の方法を組み合わせて精度を上げる）
function isTouchDevice() {
  return (
    "ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    window.matchMedia("(pointer: coarse)").matches
  );
}

$(function () {
  if (isTouchDevice()) {
    console.log("タッチデバイス");
    // スワイプイベントを有効化、ホバーエフェクトを無効化など
    $(".hover-effect").addClass("no-hover");
  } else {
    console.log("マウス操作デバイス");
  }
});

モダンAPI: navigator.userAgentData

Chrome 90以降（Edgeも対応）では navigator.userAgentData という新しいAPIが使えます。mobile プロパティで簡単にモバイル判定できます。

// userAgentData が使えるブラウザ（Chrome・Edge）
if (navigator.userAgentData) {
  const isMobile = navigator.userAgentData.mobile;
  const platform = navigator.userAgentData.platform;  // "Android", "Windows", "macOS"など

  console.log("モバイル:", isMobile);
  console.log("プラットフォーム:", platform);

  if (isMobile) {
    $("body").addClass("is-mobile");
  }

// Safari・Firefox ではフォールバック
} else {
  const ua = navigator.userAgent;
  if (/iPhone|iPad|iPod|Android/i.test(ua)) {
    $("body").addClass("is-mobile");
  }
}

より詳細な情報（ブランド名・バージョンなど）は getHighEntropyValues() で取得できますが、ユーザーの許可が必要になります。

// 詳細なUA情報を取得（Chrome・Edgeのみ対応）
if (navigator.userAgentData) {
  navigator.userAgentData.getHighEntropyValues([
    "platform", "platformVersion", "architecture", "model", "uaFullVersion"
  ]).then(function (ua) {
    console.log("OS:", ua.platform, ua.platformVersion);
    console.log("モデル:", ua.model);        // Androidデバイスのモデル名
    console.log("アーキテクチャ:", ua.architecture);
  });
}

3つの方法 比較一覧

実践パターン

スマホのみスワイプイベントを有効化

$(function () {
  const isMobile = window.matchMedia("(max-width: 768px)").matches;

  if (isMobile) {
    let startX = 0;
    $("#slider").on("touchstart", function (e) {
      startX = e.originalEvent.changedTouches[0].clientX;
    });
    $("#slider").on("touchend", function (e) {
      const endX = e.originalEvent.changedTouches[0].clientX;
      if (startX - endX > 50)  { nextSlide(); }   // 左スワイプ
      if (endX - startX > 50)  { prevSlide(); }   // 右スワイプ
    });
  }
});

デバイスに応じたリンクを出し分ける

$(function () {
  const ua = navigator.userAgent;
  const isIOS     = /iPhone|iPad|iPod/i.test(ua);
  const isAndroid = /Android/i.test(ua);

  // App Store / Google Play リンクをデバイスに応じて切り替え
  if (isIOS) {
    $("#app-link").attr("href", "https://apps.apple.com/app/id000000");

  } else if (isAndroid) {
    $("#app-link").attr("href", "https://play.google.com/store/apps/details?id=com.example");
  } else {
    // PCでは非表示
    $("#app-download-section").hide();
  }
});

よくある質問（FAQ）

あわせて読みたい

• 【jQuery】スマホのみ処理を実行する方法完全ガイド
• JavaScriptでデバイスの判定を行いスマホとPCで処理を変更する方法
• PCとスマホで異なるCSSを適用する方法

まとめ

デバイス判定は単一の方法に頼らず、目的に応じて matchMedia・userAgent・タッチ判定を組み合わせるのがベストプラクティスです。