クライアント案件にて使う場面が出てきたのでとりあえず備忘録としてのメモです。今回はJavaScriptでブラウザやモバイル端末ごとに挙動を変えたい場合に使いました。ユーザーエージェントを取得し、そこに含まれている情報を元に分岐させています。   【javascript】

var ua = window.navigator.userAgent.toLowerCase();

// ブラウザ
var ie6 = ua.indexOf("msie 6.") != -1;
var ie7 = ua.indexOf("msie 7.") != -1;
var ie8 = ua.indexOf("msie 8.") != -1;
var ie9 = ua.indexOf("msie 9.") != -1;
var ie10 = ua.indexOf("msie 10.") != -1;
var ie11 = ua.indexOf("trident/7") != -1;
var edge = ua.indexOf("edge") != -1;
var firefox = ua.indexOf("firefox") != -1;
var opera = ua.indexOf("opr") != -1;
var chrome = ua.indexOf("chrome") != -1 && ua.indexOf("edge") == -1 && ua.indexOf("safari") != -1;
var iosChrome = ua.indexOf("crios") != -1 && ua.indexOf("mobile") != -1 && ua.indexOf("safari") != -1;
var iosSafari = ua.indexOf("mobile") != -1 && ua.indexOf("safari") != -1;
var iosSafari = ua.indexOf("safari") != -1;

if (ie6) {
  alert("IE6");
} else if (ie7) {
  alert("IE7");
} else if (ie8) {
  alert("IE8");
} else if (ie9) {
  alert("IE9");
} else if (ie10) {
  alert("IE10");
} else if (ie11) {
  alert("IE11");
} else if (edge) {
  alert("Edge");
} else if (firefox) {
  alert("Firefox");
} else if (opera) {
  alert("Opera");
} else if (chrome) {
  alert("Google Chrome");
} else if (iosChrome) {
  alert("Google Chrome iOS");
} else if (iosSafari) {
  alert("Safari iOS");
} else if (safari) {
  alert("Safari");
}

// モバイルデバイス
var ipod = ua.indexOf("ipod") != -1;
var iphone = ua.indexOf("iphone") != -1;
var ipad = ua.indexOf("ipad") != -1;
var android = ua.indexOf("android") != -1 && ua.indexOf("mobile") != -1;
var androidTablet = ua.indexOf("android") != -1 && ua.indexOf("mobile") == -1;

if (ipod) { 
  alert("iPod"); 
} else if (iphone) { 
  alert("iPhone");
} else if (ipad) { 
  alert("iPad"); 
} else if (android) { 
  alert("Android");
} else if (androidTablet) { 
  alert("Android Tablet");
}

  このユーザーエージェントですが、例えばGoogle ChromeのものにもSafariの文字が含まれていたりと少しややこしいケースもあります。ですので、上記の順に指定してあげることが重要になってきます。   ただし、ユーザーエージェントについてはブラウザやデバイスのバージョンが上がるごとに微妙に違いがあるようですので、都度ユーザーエージェントを取得して確認した上で条件分岐させた方が良さそうです。ですのでユーザーエージェントについては変数で保持しておいた方が改修時にラクかもしれません。今回のサンプルはこちらにありますので、お使いのブラウザやモバイル端末でも確認いただけます。   （参考にさせて頂いたサイト） JavaScriptでUserAgentを使った判別をする