UserAgentでブラウザとOSを判定する(JavaScript)

概要

Webサイトを作っているとUserAgentでブラウザとOSを判定したいことがよくある。

実際に試す

テキストから判定する

ua:

コード

function getOS(ua){
  let os = 'Unknown';

  if(ua.indexOf("windows nt") !== -1) {
    os = 'Microsoft Windows';
  } else if(ua.indexOf("android") !== -1) {
    os = "Android";
  } else if(ua.indexOf("iphone") !== -1 || ua.indexOf("ipad") !== -1) {
    os = 'iOS';
  } else if(ua.indexOf("mac os x") !== -1) {
    os = 'macOS';
  }
  return os;
}

function getBrowser(ua){
  let browser = 'Unknown';

  if(ua.indexOf("edge") !== -1 || ua.indexOf("edga") !== -1 || ua.indexOf("edgios") !== -1) {
    browser = "Microsoft Edge";
  } else if (ua.indexOf("opera") !== -1 || ua.indexOf("opr") !== -1) {
    browser = "Opera";
  } else if (ua.indexOf("samsungbrowser") !== -1) {
    browser = "Samsung Internet Browser";
  } else if (ua.indexOf("ucbrowser") !== -1) {
    browser = "UC Browser";
  } else if(ua.indexOf("chrome") !== -1 || ua.indexOf("crios") !== -1) {
    browser = "Google Chrome";
  } else if(ua.indexOf("firefox") !== -1 || ua.indexOf("fxios") !== -1) {
    browser = "Mozilla Firefox";
  } else if(ua.indexOf("safari") !== -1) {
    browser = "Safari";
  } else if (ua.indexOf("msie") !== -1 || ua.indexOf("trident") !== -1) {
    browser = "Internet Explorer";
  }
  return browser;
}

document.getElementById("currentBrowserButton").onclick = function() {
  const ua = window.navigator.userAgent.toLowerCase();
  console.log(ua);
  let os = getOS(ua);
  let browser = getBrowser(ua);
  alert(`OS=${os}, ブラウザ=${browser}`);
};

document.getElementById("uaButton").onclick = function() {
  const ua = document.getElementById("uaInput").value;
  let os = getOS(ua);
  let browser = getBrowser(ua);
  alert(`OS=${os}, ブラウザ=${browser}`);
};

参考サイト

Comments

タイトルとURLをコピーしました