【JavaScript】スマホとPCを判定して処理を切り替える方法｜matchMedia・userAgent・タッチ判定・実装パターンまで解説

// CSS のブレークポイント（768px）で判定
const isMobile = window.matchMedia("(max-width: 768px)").matches;

if (isMobile) {
  console.log("モバイル表示");
  initHamburgerMenu();
} else {
  console.log("PC 表示");
  initDropdownMenu();
}

// ウィンドウリサイズ時にも判定を更新（レスポンシブ対応）
const mql = window.matchMedia("(max-width: 768px)");

function handleDeviceChange(e) {
  if (e.matches) {
    console.log("モバイルに切り替わった");
    initHamburgerMenu();
  } else {
    console.log("PC に切り替わった");
    initDropdownMenu();
  }
}

// 初回判定
handleDeviceChange(mql);

// リサイズ時に自動で再判定
mql.addEventListener("change", handleDeviceChange);

// スマートフォンの判定（iPhone / Android スマホ）
function isSmartphone() {
  const ua = navigator.userAgent;
  return /iPhone|Android.*Mobile/i.test(ua);
}

// タブレットの判定（iPad / Android タブレット）
function isTablet() {
  const ua = navigator.userAgent;
  // iPadOS 13+ は Mac として報告されるため別途判定
  const isIPad = navigator.platform === "MacIntel"
    && navigator.maxTouchPoints > 1;
  return isIPad || /Android(?!.*Mobile)/i.test(ua);
}

// PC の判定（スマホでもタブレットでもない）
function isPC() {
  return !isSmartphone() && !isTablet();
}

console.log("スマホ:", isSmartphone());
console.log("タブレット:", isTablet());
console.log("PC:", isPC());

// タッチデバイスかどうか
function isTouchDevice() {
  return navigator.maxTouchPoints > 0
    || "ontouchstart" in window;
}

if (isTouchDevice()) {
  // タッチ操作用の処理
  enableSwipeNavigation();
} else {
  // マウス操作用の処理
  enableHoverEffects();
}

// Chromium 系ブラウザ（Chrome / Edge / Opera）のみ
if (navigator.userAgentData) {
  console.log("モバイル:", navigator.userAgentData.mobile);   // true / false
  console.log("プラットフォーム:", navigator.userAgentData.platform); // "Android" / "Windows" 等
}

// フォールバック付き判定
function isMobile() {
  if (navigator.userAgentData) {
    return navigator.userAgentData.mobile;
  }
  return /iPhone|Android.*Mobile/i.test(navigator.userAgent);
}

// matchMedia ベース + タッチ判定 + userAgent フォールバック
function getDeviceType() {
  // (1) matchMedia（画面幅ベース: レイアウト向け）
  const isNarrow = window.matchMedia("(max-width: 768px)").matches;
  const isMedium = window.matchMedia("(min-width: 769px) and (max-width: 1024px)").matches;

  // (2) タッチ対応
  const hasTouch = navigator.maxTouchPoints > 0;

  if (isNarrow) return "smartphone";
  if (isMedium && hasTouch) return "tablet";
  return "desktop";
}

const device = getDeviceType();
console.log(device); // "smartphone" / "tablet" / "desktop"

// body にクラスを付与して CSS でも活用
document.body.classList.add(`is-${device}`);

/* PC 用メニュー: 768px 以下で非表示 */
.desktop-menu {
  display: flex;
}
@media (max-width: 768px) {
  .desktop-menu { display: none; }
}

/* スマホ用メニュー: 768px 以下でのみ表示 */
.mobile-menu {
  display: none;
}
@media (max-width: 768px) {
  .mobile-menu { display: block; }
}

/* ホバーが使えるデバイスのみ */
@media (hover: hover) {
  .card:hover { transform: scale(1.05); }
}

/* タッチデバイスのみ */
@media (pointer: coarse) {
  .btn { min-height: 48px; } /* タップしやすいサイズ */
}

const mql = window.matchMedia("(max-width: 768px)");

function setupMenu(e) {
  if (e.matches) {
    // スマホ: ハンバーガーメニュー
    document.querySelector(".hamburger").hidden = false;
    document.querySelector(".nav-desktop").hidden = true;
  } else {
    // PC: 通常ナビバー
    document.querySelector(".hamburger").hidden = true;
    document.querySelector(".nav-desktop").hidden = false;
  }
}

setupMenu(mql);
mql.addEventListener("change", setupMenu);

const hasTouch = navigator.maxTouchPoints > 0;

if (hasTouch) {
  // タッチ操作: touchstart / touchmove / touchend
  slider.addEventListener("touchstart", onTouchStart);
  slider.addEventListener("touchmove", onTouchMove);
  slider.addEventListener("touchend", onTouchEnd);
} else {
  // マウス操作: mousedown / mousemove / mouseup
  slider.addEventListener("mousedown", onMouseDown);
  slider.addEventListener("mousemove", onMouseMove);
  slider.addEventListener("mouseup", onMouseUp);
}

// Pointer Events なら 1 つのコードで両方対応可能（推奨）
slider.addEventListener("pointerdown", onPointerDown);
slider.addEventListener("pointermove", onPointerMove);
slider.addEventListener("pointerup", onPointerUp);

// ホバーが使えるデバイスのみツールチップを有効化
if (window.matchMedia("(hover: hover)").matches) {
  document.querySelectorAll("[data-tooltip]").forEach(el => {
    el.addEventListener("mouseenter", showTooltip);
    el.addEventListener("mouseleave", hideTooltip);
  });
}

// スマホは通信量を節約するため早めに遅延読み込み
const rootMargin = window.matchMedia("(max-width: 768px)").matches
  ? "200px"   // スマホ: 200px 手前で読み込み
  : "500px";  // PC: 500px 手前で読み込み

const observer = new IntersectionObserver(callback, { rootMargin });

// ページ読み込み時にデバイスクラスを付与
// CSS でも JS でも活用できる
const mql = window.matchMedia("(max-width: 768px)");

function updateDeviceClass(e) {
  document.body.classList.toggle("is-mobile", e.matches);
  document.body.classList.toggle("is-desktop", !e.matches);
}

updateDeviceClass(mql);
mql.addEventListener("change", updateDeviceClass);

// CSS で活用: body.is-mobile .sidebar { display: none; }