【JavaScript】ブラウザを判定する方法｜userAgent・userAgentData・機能検出・モバイル判定まで解説

// NG: ブラウザ名で判定
// if (navigator.userAgent.includes("Safari")) { ... }

// OK: 機能の有無で判定
if ("IntersectionObserver" in window) {
  // IntersectionObserver をサポートしている
  const observer = new IntersectionObserver(callback);
} else {
  // フォールバック処理
}

// Service Worker のサポート判定
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// CSS supports() でスタイルの対応を判定
if (CSS.supports("display", "grid")) {
  // CSS Grid がサポートされている
}

console.log(navigator.userAgent);
// 例（Chrome）:
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"

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

  // Edge（Chromium ベース）
  if (ua.includes("Edg/")) return "Edge";

  // Opera
  if (ua.includes("OPR/") || ua.includes("Opera")) return "Opera";

  // Chrome（Edge / Opera を先に除外してから判定）
  if (ua.includes("Chrome/") && !ua.includes("Edg/") && !ua.includes("OPR/")) return "Chrome";

  // Firefox
  if (ua.includes("Firefox/")) return "Firefox";

  // Safari（Chrome / Edge を除外した上で判定）
  if (ua.includes("Safari/") && !ua.includes("Chrome")) return "Safari";

  // IE 11
  if (ua.includes("Trident/")) return "IE";

  return "Unknown";
}

console.log(detectBrowser()); // "Chrome"

// 基本情報（同期的に取得可能）
if (navigator.userAgentData) {
  console.log(navigator.userAgentData.brands);
  // [{ brand: "Chromium", version: "122" }, { brand: "Google Chrome", version: "122" }]

  console.log(navigator.userAgentData.mobile);   // false
  console.log(navigator.userAgentData.platform);  // "Windows"
}

// 詳細情報（非同期: Promise）
if (navigator.userAgentData) {
  navigator.userAgentData.getHighEntropyValues([
    "platform",
    "platformVersion",
    "architecture",
    "model",
    "fullVersionList"
  ]).then(data => {
    console.log(data.platform);        // "Windows"
    console.log(data.platformVersion); // "15.0.0"
    console.log(data.architecture);    // "x86"
    console.log(data.fullVersionList); // 詳細バージョン
  });
}

// 方式(1): userAgentData.mobile（Chromium 系のみ）
function isMobile() {
  if (navigator.userAgentData) {
    return navigator.userAgentData.mobile;
  }
  // フォールバック: userAgent で判定
  return /Android|iPhone|iPad|iPod|webOS|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
}

console.log(isMobile()); // true / false

// 方式(2): タッチ対応で判定
function hasTouchScreen() {
  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}

// 方式(3): 画面幅で判定（レスポンシブの基準に合わせる）
function isMobileWidth() {
  return window.matchMedia("(max-width: 768px)").matches;
}

// iOS 判定（iPhone / iPod）
const isIOS = /iPhone|iPod/.test(navigator.userAgent)
  || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1); // iPad

// iPad 判定（iPadOS 13+ は Mac として報告される）
const isIPad = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;

// Android 判定
const isAndroid = /Android/i.test(navigator.userAgent);

// Windows 判定
const isWindows = navigator.userAgent.includes("Windows") 
  || navigator.userAgentData?.platform === "Windows";

// macOS 判定
const isMac = navigator.userAgent.includes("Macintosh")
  || navigator.userAgentData?.platform === "macOS";

function getBrowserInfo() {
  const info = {
    browser: "Unknown",
    mobile: false,
    platform: "Unknown",
  };

  // userAgentData 優先
  if (navigator.userAgentData) {
    const brand = navigator.userAgentData.brands.find(
      b => !b.brand.includes("Not")
    );
    if (brand) info.browser = brand.brand;
    info.mobile = navigator.userAgentData.mobile;
    info.platform = navigator.userAgentData.platform;
    return info;
  }

  // フォールバック: userAgent
  const ua = navigator.userAgent;
  if (ua.includes("Edg/"))    info.browser = "Edge";
  else if (ua.includes("OPR/")) info.browser = "Opera";
  else if (ua.includes("Chrome/")) info.browser = "Chrome";
  else if (ua.includes("Firefox/")) info.browser = "Firefox";
  else if (ua.includes("Safari/")) info.browser = "Safari";
  else if (ua.includes("Trident/")) info.browser = "IE";

  info.mobile = /Android|iPhone|iPad|iPod/i.test(ua);
  if (ua.includes("Windows")) info.platform = "Windows";
  else if (ua.includes("Mac")) info.platform = "macOS";
  else if (ua.includes("Android")) info.platform = "Android";
  else if (ua.includes("Linux")) info.platform = "Linux";

  return info;
}

console.log(getBrowserInfo());
// { browser: "Chrome", mobile: false, platform: "Windows" }

if (navigator.userAgent.includes("Trident/")) {
  document.getElementById("ie-warning").hidden = false;
  // "このブラウザはサポート対象外です。Chrome または Edge をお使いください。"
}

// Safari の 100vh 問題（アドレスバー分がずれる）対策
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
  window.addEventListener("resize", () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  });
}

// ブラウザ情報をアナリティクスイベントに含める
const info = getBrowserInfo();
analyticsTrack("page_view", {
  browser: info.browser,
  platform: info.platform,
  mobile: info.mobile,
});

// CSS メディアクエリと統一した判定
const isMobile = window.matchMedia("(max-width: 768px)").matches;

if (isMobile) {
  // モバイル用のメニューを初期化
  initHamburgerMenu();
} else {
  // PC 用のドロップダウンメニューを初期化
  initDropdownMenu();
}