JavaScript/jQuery を使ったブラウザ判定

CATEGORY: jQuery

2014年4月13日

時々使用するブラウザの判定、毎回調べているのでメモ。

「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。

UserAgent での判定

UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれがどのぐらい使えるかは不明（確実性に疑問）。

UserAgent とそのバージョン等は以下で取得できる。

//ユーザエージェント
var userAgent = window.navigator.userAgent;
//バージョン
var appVersion = window.navigator.appVersion;
//名前
var appName = window.navigator.appName;
//プラットフォームのタイプ
var platform = window.navigator.platform;
//コード名
var appCodeName = window.navigator.appCodeName;

以下は Windows のChrome での例

ユーザエージェント
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
バージョン
5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
名前
Netscape
プラットフォームのタイプ
Win32
コード名
Mozilla

現時点でのブラウザごとのユーザエージェントの値（例）

IE（バージョン 11.0.9600.17041）
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Media Center PC 6.0; MASA; McAfee; rv:11.0) like Gecko
（msie は含まれていない）

Chrome（バージョン 34.0.1847.116 m）
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36

Firefox（バージョン 28.0）
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0

Safari（バージョン 5.1.7 (7534.57.2) ）
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

Opera（バージョン 20.0.1387.91）
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36 OPR/20.0.1387.91
（Opera は含まれていない）

UserAgent で判定して処理を行う例（確実性が劣ると思うので、あまり使えないかも）

//UserAgent で判定
    var userAgent = window.navigator.userAgent.toLowerCase();
    var appVersion = window.navigator.appVersion.toLowerCase();

    if (userAgent.indexOf('msie') != -1) {
        //IE6～9（おそらく）
        if (appVersion.indexOf("msie 6.") != -1) {
            //IE6での処理
        }else if (appVersion.indexOf("msie 7.") != -1) {
            //IE7での処理
        }else if (appVersion.indexOf("msie 8.") != -1) {
            //IE8での処理
        }else if (appVersion.indexOf("msie 9.") != -1) {
            //IE9での処理
        }
    }else if (userAgent.indexOf('chrome') != -1) {
        //Chrome/Opera（最新版）での処理
    }else if (userAgent.indexOf('safari') != -1) {
        //Safariでの処理
    }else if (userAgent.indexOf('firefox') != -1) {
        //Firefoxでの処理
    }

使用例

ブラウザが、クローム、サファリ、オペラの場合は true を返す関数を作成する例

function is_chromeSafariOpeara() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('chrome') != -1 || ua.indexOf('safari') != -1 || ua.indexOf('opera') != -1) {
      return true;
    }    
  }
  
  //作成した関数を利用
  if(is_chromeSafariOpeara()) {  
      $('#elem').css({...});
    }

OS の判定

UserAgent の文字列から OS を判定する例（確実性は不明）

if(navigator.userAgent.toLowerCase().indexOf('win') != -1){
    // Windowsでの処理
  }else if(navigator.userAgent.toLowerCase().indexOf('mac') != -1) {
    // Macでの処理    
  }

サポートしている機能での判定

ブラウザがサポートしている機能でブラウザを判定する方法。こちらの方が確実性が高いと思う。但し、「IE10以上での処理」の部分は？。 IE11 で試したところ「IE9」と表示された。

参考にさせていただいたサイト：
「JavaScript ユーザエージェント条件分岐便利スニペット（w3g.jp）」

jQuery(function($){
  //ユーザエージェント条件分岐便利スニペット
  var _ua = (function(){
    return {
      ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
      ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
      ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
      ltIE9:document.uniqueID && typeof window.matchMedia == "undefined",
      gtIE10:document.uniqueID && window.matchMedia,
      Trident:document.uniqueID,
      Gecko:'MozAppearance' in document.documentElement.style,
      Presto:window.opera,
      Blink:window.chrome,
      Webkit:typeof window.chrome == "undefined" && 'WebkitAppearance' in document.documentElement.style,
      Touch:typeof document.ontouchstart != "undefined",
      Mobile:typeof window.orientation != "undefined",
      ltAd4_4:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
      Pointer:window.navigator.pointerEnabled,
      MSPoniter:window.navigator.msPointerEnabled
    }
  })();
  
  /* 以下は用途に合わせて必要な部分のみを使えばよいと思う */
  
  if(_ua.ltIE6){
    //document.write('IE6以下');
    //IE6以下での処理        
  }else if(_ua.ltIE7){
    //document.write('IE7以下');
    //IE7以下での処理
  }else if(_ua.ltIE8){
    //document.write('IE8以下');
    //IE8以下での処理
  }else if(_ua.Trident && !_ua.ltIE8){
    //document.write('IE9');
    //IE9での処理
  }else if( (_ua.Trident && !_ua.ltIE9 ) || _ua.gtIE10){
    //document.write('IE10以上');
    //IE10以上での処理★ IE11 で試したところ「IE9」と表示される
  }else if(_ua.Blink && !_ua.Mobile){
    //document.write('デスクトップ版Chrome/Opera');
    //デスクトップ版Chrome/Operaでの処理
  }else if(_ua.Blink && _ua.Mobile){
    //document.write('Chrome for Android');
    //Chrome for Androidでの処理
    if(_ua.ltAd4_4){
      //document.write('：バージョンはAndroid4.4未満');
      //Chrome for Android（バージョン Android4.4未満）での処理
    }
  }else if(_ua.Webkit && !_ua.Mobile){
    //デスクトップ版Safariでの処理
    //document.write('デスクトップ版Safari');
  }else if(_ua.Webkit && _ua.Mobile){
    //document.write('モバイルでWebkitベース');
    //モバイルでWebkitベースでの処理
    if(_ua.ltAd4_4){
      //document.write('：バージョンはAndroid4.4未満');
      //モバイルでWebkitベース（バージョン Android4.4未満）での処理
    }
  }else if(_ua.Gecko && !_ua.Mobile){
    //document.write('デスクトップ版Firefox');
    //デスクトップ版Firefoxでの処理
  }else if(_ua.Gecko && _ua.Mobile){
    //document.write('モバイル版Firefox');
    //モバイル版Firefoxでの処理
  }else if(_ua.Presto){
    //document.write('旧Presto OperaまたはOpera Mini');
    //旧Presto OperaまたはOpera Miniでの処理
  }
  
});

上記スニペットを利用した例。

IE7、IE8 ではアイコンフォントが使用できないため処理を分岐する例。

var close_link;
  //Modern Browser, IE9 +
  if(!_ua.ltIE8){  
    close_link = '<button type="button" class="close"><span class="glyphicon glyphicon-remove-circle"></span></button>'; 
  }else{  
    //IE7、IE8
    if($('body').hasClass('jp')) {
      close_link = '<a href="#" class="close_link">（ x 閉じる）</a>';
    }else{
      close_link = '<a href="#" class="close_link">( x close)</a>';
    }  
  }

使いたい機能が機能するかでの判定

参考にさせていただいたサイト：
「jQuery 1.9 で $.browser が使えなくなってしまった対策（cyokodog.net）」

例えばスムーススクロールを実装する場合、ブラウザが webkit かどうかではなく、スクロールさせることができる要素が html か body かがわかればいいので、実際にどちらの要素がスクロールするかを試して判定する。

//スムーズスクロールの例
  var isHtmlScrollable = (function(){
    var html = $('html'), top = html.scrollTop();
    var elm = $('<div/>').height(10000).prependTo('body');
    html.scrollTop(10000);
    var rs = !!html.scrollTop();
    html.scrollTop(top);
    elm.remove();
    return rs;
  })();
  
  $('a[href^=#]').click(function(){
    
        $(isHtmlScrollable ? 'html' : 'body').animate({
            scrollTop: 0
        },  300);
        return false;
    });

関連ページ：「ページ内リンクへアニメーションで移動」

position:fixed が有効かどうかを判定する例

var isPositionFixedEnable  = (function(){
    var el = $('<div/>').add('<div/>').css({height:8,position:'fixed',top:0}).prependTo('body');
    var rs = el.eq(0).offset().top == el.eq(1).offset().top;
    el.remove();
    return rs;
  })();

Web Design Leaves