JavaScriptでUserAgentによるブラウザ判定「if.useragent.js」v0.9
昨今はクロスブラウザ対応が非常に多く求められますので、もうユーザーエージェントで条件分岐やっちゃおうかー と進めていたJavaScriptの動作が検証できました。
uaNameでブラウザタイプが、ios_verでiOSのバージョンが取れます。CSS側で制御する場合の例ですと、htmlにクラス付与したりがよくあるパターン。
|
1 2 3 |
jQuery(function(){ $('html').addClass(uaName); }); |
というふうにすると、例えばCSSで #content を iphoneだけCSS制御したい場合、
|
1 2 |
#content { background: #000; } .iphone #content { background: #04f; } |
なんてことができるようになります。
結構便利。
対応ブラウザ
- IE6 -> 10
- iPhone iOS 2 or higher
- iPad
- iPod
- Android
- Chrome
- Firefox
- Safari
- Opera
注意点
if.useragent.js 内の Safari を判定している部分、if (userAgent.indexOf(‘safari’) != -1) より先に firefox を判定するコードをもっていくと、同じuserAgent.indexOf(‘gecko’)でマッチしちゃうので、並び替えしたい場合はなんらかしらの手を打つ必要があります。なるべくはシェア順にしたいところですが、シンプルなコードが好きなのでそのままにしてあります。
あとiOSの分岐ですが、iPhoneの場合だけ取るようにしてます。iPadやらでやりたい場合は適宜コピペしてあげればいいんじゃないでしょうか。
if.useragent.js v0.9
コードの内容は下記のようになっております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* * if.useragent.js v0.9 * info: http://company.miyanavi.net/archives/987 * auther: miyanavi * licence: MIT * */ var userAgent = window.navigator.userAgent.toLowerCase(), appVersion = window.navigator.appVersion.toLowerCase(), uaName = 'unknown', ios = '', ios_ver = ''; if (userAgent.indexOf('msie') != -1) { uaName = 'ie'; if (appVersion.indexOf('msie 6.') != -1) { uaName = 'ie6'; } else if (appVersion.indexOf('msie 7.') != -1) { uaName = 'ie7'; } else if (appVersion.indexOf('msie 8.') != -1) { uaName = 'ie8'; } else if (appVersion.indexOf('msie 9.') != -1) { uaName = 'ie9'; } else if (appVersion.indexOf('msie 10.') != -1) { uaName = 'ie10'; } } else if (userAgent.indexOf('chrome') != -1) { uaName = 'chrome'; } else if (userAgent.indexOf('iphone') != -1) { uaName = 'iphone'; var ios = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); ios_ver = [parseInt(ios[1], 10), parseInt(ios[2], 10), parseInt(ios[3] || 0, 10)]; } else if (userAgent.indexOf('ipad') != -1) { uaName = 'ipad'; } else if (userAgent.indexOf('ipod') != -1) { uaName = 'ipod'; } else if (userAgent.indexOf('safari') != -1) { uaName = 'safari'; } else if (userAgent.indexOf('gecko') != -1) { uaName = 'firefox'; } else if (userAgent.indexOf('opera') != -1) { uaName = 'opera'; } else if (userAgent.indexOf('android') != -1) { uaName = 'android'; } else if (userAgent.indexOf('mobile') != -1) { uaName = 'mobile'; }; |
検証用HTML
検証用に使ってたHTML置いときます。
テスト用HTMLなんで右クリックでダウンロードもOK↓
http://company.miyanavi.net/sample/if-userAgent-testpage.html
中身は下記のようになってます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<html> <head> <meta charset="UTF-8"> <title>JavaScript</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <script> /* * if.useragent.js v0.9 * info: http://company.miyanavi.net/archives/987 * auther: miyanavi * licence: MIT * */ var userAgent = window.navigator.userAgent.toLowerCase(), appVersion = window.navigator.appVersion.toLowerCase(), uaName = 'unknown', ios = '', ios_ver = ''; if (userAgent.indexOf('msie') != -1) { uaName = 'ie'; if (appVersion.indexOf('msie 6.') != -1) { uaName = 'ie6'; } else if (appVersion.indexOf('msie 7.') != -1) { uaName = 'ie7'; } else if (appVersion.indexOf('msie 8.') != -1) { uaName = 'ie8'; } else if (appVersion.indexOf('msie 9.') != -1) { uaName = 'ie9'; } else if (appVersion.indexOf('msie 10.') != -1) { uaName = 'ie10'; } } else if (userAgent.indexOf('chrome') != -1) { uaName = 'chrome'; } else if (userAgent.indexOf('iphone') != -1) { uaName = 'iphone'; var ios = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); ios_ver = [parseInt(ios[1], 10), parseInt(ios[2], 10), parseInt(ios[3] || 0, 10)]; } else if (userAgent.indexOf('ipad') != -1) { uaName = 'ipad'; } else if (userAgent.indexOf('ipod') != -1) { uaName = 'ipod'; } else if (userAgent.indexOf('safari') != -1) { uaName = 'safari'; } else if (userAgent.indexOf('gecko') != -1) { uaName = 'firefox'; } else if (userAgent.indexOf('opera') != -1) { uaName = 'opera'; } else if (userAgent.indexOf('android') != -1) { uaName = 'android'; } else if (userAgent.indexOf('mobile') != -1) { uaName = 'mobile'; }; if (uaName) { document.write('<h1>uaName = '+uaName+'</h1>'); } if (ios) { document.write('<br>iOS = '+ios); } if (ios_ver) { document.write(', version = '+ios_ver); } </script> <hr> ブラウザ情報<br> <tt style="font-size: 12px;"> [ユーザエージェント： navigator.userAgent]<br><script>document.write(navigator.userAgent)</script><br> [バージョン： navigator.appVersion]<br><script>document.write(navigator.appVersion)</script><br> [名： navigator.appName]<br><script>document.write(navigator.appName)</script><br> [プラットフォームのタイプ： navigator.platform]<br><script>document.write(navigator.platform)</script><br> [コード名： navigator.appCodeName]<br><script>document.write(navigator.appCodeName)</script><br> </tt> </body> </html> |
（追記）
Android で Safari の場合、上手く判定できないようです、下のコメント欄をご覧ください。
2 件のコメント
ソースコードの
37行目の
「} else if (userAgent.indexOf(‘safari’) != -1) {」
と
43行目の
「} else if (userAgent.indexOf(‘android’) != -1) {」
に関して少し疑問があり、コメントを残します。
Androidの標準ブラウザだとUserAgentの語尾にsafariが書かれている場合が多く
上記の順序だとAndroidの多くの標準ブラウザでsafariとして特定される可能性が
高いと思われます。
私のDocomoのLG OptimusGだと下記のように取得されます。
「Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; L-01E Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30」
IE10の仕分けについて、Edgeというのが基本設定になっていて、Firefoxの診断を受けたので改造してみました。
IE10がEdge設定の場合、userAgentは
mozilla/5.0 (windows nt 6.1; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e; bri/2; tablet pc 2.0; infopath.1; rv:11.0) like gecko
でした。
} else if (userAgent.indexOf(‘gecko’) != -1) {
if(userAgent.indexOf(‘like’) != -1 ) {
uaName = ‘ie10’;
} else {
uaName = ‘firefox’;
}
}
firefoxの部分は入れ子で再判定をしてはどうでしょうか？