【jQuery】スマホのみ処理を実行する方法完全ガイド｜userAgent・matchMedia・window.width比較

スマートフォンだけに特定の処理を実行させたい場面は多くあります。たとえば「スマホ時のみハンバーガーメニューを有効化する」「タブレット以下ではスライドショーを無効化する」など、レスポンシブ対応の実装で必ず直面する課題です。

jQueryでスマホ判定を行う主な方法は次の4つです。

1. window.matchMedia()（推奨・最もモダン）
2. $(window).width()（ウィンドウ幅で判定）
3. navigator.userAgent（ユーザーエージェント文字列）
4. CSS連動（display:noneチェック）

方法1: window.matchMedia()【推奨】

window.matchMedia() はCSSのメディアクエリをJavaScriptから直接使える最もモダンな方法です。CSSで @media (max-width: 768px) と書くのと同じ条件で判定できるため、デザインとロジックの一貫性が保てます。

基本的な使い方

// スマホ幅（768px以下）かどうかを判定
if (window.matchMedia("(max-width: 768px)").matches) {
  console.log("スマホ表示です");
  // スマホ専用の処理
} else {
  console.log("タブレット・PC表示です");
}

画面サイズ変更（リサイズ）にも対応する

ウィンドウサイズが変わった際にも再判定したい場合は addEventListener を使います。

var mq = window.matchMedia("(max-width: 768px)");

function handleSmartphone(e) {
  if (e.matches) {
    // スマホ幅になったときの処理
    console.log("スマホ幅に切り替わりました");
  } else {
    // PC幅に戻ったときの処理
    console.log("PC幅に切り替わりました");
  }
}

// 初回判定
handleSmartphone(mq);

// リサイズ時も判定
mq.addEventListener("change", handleSmartphone);

方法2: ウィンドウ幅で判定（$(window).width()）

jQueryの $(window).width() でウィンドウの横幅を取得し、768px以下をスマホとして判定する方法です。古くからよく使われていますが、現在は window.matchMedia() の利用を推奨します。

基本コード

$(function() {
  var winWidth = $(window).width();

  if (winWidth <= 768) {
    console.log("スマホ表示");
    // スマホ専用処理
  } else {
    console.log("PC/タブレット表示");
  }
});

リサイズイベントとの組み合わせ

function checkWidth() {
  var w = $(window).width();
  if (w <= 768) {
    $(".sp-only").show();
    $(".pc-only").hide();
  } else {
    $(".sp-only").hide();
    $(".pc-only").show();
  }
}

// ページ読み込み時
$(function() { checkWidth(); });

// ウィンドウリサイズ時
$(window).on("resize", function() {
  checkWidth();
});

方法3: ユーザーエージェントで判定（navigator.userAgent）

navigator.userAgent はブラウザがサーバーに送る文字列で、デバイスの種類（iPhone / Android など）が含まれています。この文字列を解析してスマホかどうかを判定する方法です。

基本コード

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

  if (/iPhone|Android.+Mobile/.test(ua)) {
    console.log("スマートフォンです");
    // スマホ専用処理
  } else if (/iPad|Android/.test(ua)) {
    console.log("タブレットです");
  } else {
    console.log("PCです");
  }
});

よく使われるUAパターン

方法4: CSSと連動させる方法（display:noneチェック）

CSSのメディアクエリでスマホ時のみ特定要素を非表示（display:none）にし、JSからその状態を読み取る方法です。CSSとJSのブレークポイントを別管理したくない場合に有効です。

HTML・CSS・JS の実装

まず、スマホ判定用のダミー要素をHTMLに追加します。

<!-- スマホ判定用（画面に表示しないダミー要素） -->
<span id="sp-detector"></span>

次にCSSでスマホ時のみ display:none にします。

#sp-detector {
  display: none;
}

@media (min-width: 769px) {
  #sp-detector {
    display: block;
  }
}

JSでその表示状態を確認します。

$(function() {
  if ($("#sp-detector").css("display") === "none") {
    console.log("スマホ表示（#sp-detectorが非表示）");
    // スマホ専用処理
  } else {
    console.log("PC/タブレット表示");
  }
});

各方法の比較表

実装例: スマホのみハンバーガーメニューを有効化する

window.matchMedia() を使った実践例です。スマホ幅（768px以下）のときだけハンバーガーメニューのクリックイベントを有効にします。

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

  function initMenu(mq) {
    if (mq.matches) {
      // スマホ: ハンバーガーメニューを有効化
      $(".hamburger").on("click.sp", function() {
        $(".nav-menu").slideToggle(300);
        $(this).toggleClass("is-active");
      });
    } else {
      // PC: イベントを解除してナビを表示状態に戻す
      $(".hamburger").off("click.sp");
      $(".nav-menu").show();
    }
  }

  // 初回実行
  initMenu(mqSP);

  // リサイズ時にも再実行
  mqSP.addEventListener("change", initMenu);
});

関連記事

• jQueryを使ったアニメーション付きハンバーガーメニューの実装方法 ― ハンバーガーメニューの具体的な実装方法を解説しています。
• jQueryが動かない時の解決策 ― スマホ判定処理が動かない場合のデバッグにも役立ちます。
• 【jQuery】attr()でHTMLの属性操作を行う方法 ― DOM操作の基本をおさえておきましょう。

よくある質問（FAQ）

まとめ