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

CATEGORY: jQuery

2014年4月13日

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

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

UserAgent での判定

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

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

  1. //ユーザエージェント
  2. var userAgent = window.navigator.userAgent;
  3. //バージョン
  4. var appVersion = window.navigator.appVersion;
  5. //名前
  6. var appName = window.navigator.appName;
  7. //プラットフォームのタイプ
  8. var platform = window.navigator.platform;
  9. //コード名
  10. 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 で判定して処理を行う例（確実性が劣ると思うので、あまり使えないかも）

  1. //UserAgent で判定
  2.     var userAgent = window.navigator.userAgent.toLowerCase();
  3.     var appVersion = window.navigator.appVersion.toLowerCase();
  4.  
  5.     if (userAgent.indexOf('msie') != -1) {
  6.         //IE6～9（おそらく）
  7.         if (appVersion.indexOf("msie 6.") != -1) {
  8.             //IE6での処理
  9.         }else if (appVersion.indexOf("msie 7.") != -1) {
  10.             //IE7での処理
  11.         }else if (appVersion.indexOf("msie 8.") != -1) {
  12.             //IE8での処理
  13.         }else if (appVersion.indexOf("msie 9.") != -1) {
  14.             //IE9での処理
  15.         }
  16.     }else if (userAgent.indexOf('chrome') != -1) {
  17.         //Chrome/Opera（最新版）での処理
  18.     }else if (userAgent.indexOf('safari') != -1) {
  19.         //Safariでの処理
  20.     }else if (userAgent.indexOf('firefox') != -1) {
  21.         //Firefoxでの処理
  22.     }

使用例

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

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

OS の判定

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

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

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

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

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

  1. jQuery(function($){
  2.   //ユーザエージェント条件分岐便利スニペット
  3.   var _ua = (function(){
  4.     return {
  5.       ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
  6.       ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
  7.       ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
  8.       ltIE9:document.uniqueID && typeof window.matchMedia == "undefined",
  9.       gtIE10:document.uniqueID && window.matchMedia,
  10.       Trident:document.uniqueID,
  11.       Gecko:'MozAppearance' in document.documentElement.style,
  12.       Presto:window.opera,
  13.       Blink:window.chrome,
  14.       Webkit:typeof window.chrome == "undefined" && 'WebkitAppearance' in document.documentElement.style,
  15.       Touch:typeof document.ontouchstart != "undefined",
  16.       Mobile:typeof window.orientation != "undefined",
  17.       ltAd4_4:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
  18.       Pointer:window.navigator.pointerEnabled,
  19.       MSPoniter:window.navigator.msPointerEnabled
  20.     }
  21.   })();
  22.   
  23.   /* 以下は用途に合わせて必要な部分のみを使えばよいと思う */
  24.   
  25.   if(_ua.ltIE6){
  26.     //document.write('IE6以下');
  27.     //IE6以下での処理        
  28.   }else if(_ua.ltIE7){
  29.     //document.write('IE7以下');
  30.     //IE7以下での処理
  31.   }else if(_ua.ltIE8){
  32.     //document.write('IE8以下');
  33.     //IE8以下での処理
  34.   }else if(_ua.Trident && !_ua.ltIE8){
  35.     //document.write('IE9');
  36.     //IE9での処理
  37.   }else if( (_ua.Trident && !_ua.ltIE9 ) || _ua.gtIE10){
  38.     //document.write('IE10以上');
  39.     //IE10以上での処理★ IE11 で試したところ「IE9」と表示される
  40.   }else if(_ua.Blink && !_ua.Mobile){
  41.     //document.write('デスクトップ版Chrome/Opera');
  42.     //デスクトップ版Chrome/Operaでの処理
  43.   }else if(_ua.Blink && _ua.Mobile){
  44.     //document.write('Chrome for Android');
  45.     //Chrome for Androidでの処理
  46.     if(_ua.ltAd4_4){
  47.       //document.write('：バージョンはAndroid4.4未満');
  48.       //Chrome for Android（バージョン Android4.4未満）での処理
  49.     }
  50.   }else if(_ua.Webkit && !_ua.Mobile){
  51.     //デスクトップ版Safariでの処理
  52.     //document.write('デスクトップ版Safari');
  53.   }else if(_ua.Webkit && _ua.Mobile){
  54.     //document.write('モバイルでWebkitベース');
  55.     //モバイルでWebkitベースでの処理
  56.     if(_ua.ltAd4_4){
  57.       //document.write('：バージョンはAndroid4.4未満');
  58.       //モバイルでWebkitベース（バージョン Android4.4未満）での処理
  59.     }
  60.   }else if(_ua.Gecko && !_ua.Mobile){
  61.     //document.write('デスクトップ版Firefox');
  62.     //デスクトップ版Firefoxでの処理
  63.   }else if(_ua.Gecko && _ua.Mobile){
  64.     //document.write('モバイル版Firefox');
  65.     //モバイル版Firefoxでの処理
  66.   }else if(_ua.Presto){
  67.     //document.write('旧Presto OperaまたはOpera Mini');
  68.     //旧Presto OperaまたはOpera Miniでの処理
  69.   }
  70.   
  71. });

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

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

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

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

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

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

  1. //スムーズスクロールの例
  2.   var isHtmlScrollable = (function(){
  3.     var html = $('html'), top = html.scrollTop();
  4.     var elm = $('<div/>').height(10000).prependTo('body');
  5.     html.scrollTop(10000);
  6.     var rs = !!html.scrollTop();
  7.     html.scrollTop(top);
  8.     elm.remove();
  9.     return rs;
  10.   })();
  11.   
  12.   $('a[href^=#]').click(function(){
  13.     
  14.         $(isHtmlScrollable ? 'html' : 'body').animate({
  15.             scrollTop: 0
  16.         },  300);
  17.         return false;
  18.     });

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

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

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