JavaScriptを使って、どのブラウザかを判定するあれこれ

JavaScript(以下JS)で実装するものが増えてきたのに伴い、古いブラウザを判定して処理を分けることもあります。

そういう実装のたびに調べてるのでメモしておこうと思います。

UserAgentで判定する

一番わかりやすい方法かと思いますが、UserAgentを取得してその文字列を見てどのブラウザか判別する方法です。

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if (userAgent.indexOf('msie') != -1) {
//IE全般
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 (appVersion.indexOf("msie 10.") != -1) {
//IE10
}
}else if (userAgent.indexOf('chrome') != -1) {
//Chrome
}else if (userAgent.indexOf('safari') != -1) {
//Safari
}else if (userAgent.indexOf('firefox') != -1) {
//Firefox
}else if (userAgent.indexOf('opera') != -1) {
//Opera
}

ブラウザがサポートしている機能で判定する

いろいろ調べている時に下記ページで見つけたのですが、ブラウザがサポートしている機能でブラウザ判別する方法です。

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 && !window.matchMedia,
gtIE10:document.uniqueID && document.documentMode >= 10,
Trident:document.uniqueID,
Gecko:window.sidebar,
Presto:window.opera,
Blink:window.chrome,
Webkit:!window.chrome && typeof document.webkitIsFullScreen != undefined,
Touch:typeof document.ontouchstart != "undefined",
Mobile:typeof window.orientation != "undefined"
}
})();
if(_ua.ltIE6){
//IE6
}else if(_ua.ltIE7){
//IE7
}else if(_ua.ltIE8){
//IE8
}else if(_ua.ltIE9){
//IE9
}else if(_ua.gtIE10){
//IE10
}else if(_ua.Blink){
//ChromeまたはBlink版Opera
}else if(_ua.Gecko){
//Firefox
}else if(_ua.Presto){
//旧Opera
}else if(_ua.Trident && !_ua.ltIE8){
//IE9以上
}else if( (_ua.Trident && !_ua.ltIE9 ) || _ua.gtIE10){
//IE10以上
}else if(_ua.Mobile){
//スマートフォンやタブレット端末
}else if(_ua.Touch){
//タッチデバイス
}else if(_ua.Touch && !_ua.Mobile){
//デスクトップ版のタッチデバイス対応端末
}else if(_ua.Webkit){
//safari
}

jQuery.supportで判別する

jQueryを使って判別する方法としてjQuery.supportというのがあります。こちらもブラウザがどの機能を使えるかで判定する方法です。

例:

if(!jQuery.support.opacity){
//IE6~8で使う処理
}

一個上のjQueryを使わない版と違うところは、「jQuery.support.」の後のプロパティが決まっているところでしょうか。なので以下のページに説明がありますがこれだけだとIE6と7の区別はできないみたいです。

jQuery.browserで判別する

また別の方法でjQuery.browserを使って判定というのがあったのですが、jQuery1.3の時点で非推奨になっていて
1.9からは使うことも出来ませんので他のものを使いましょう。

if(jQuery.browser.msie){
//IE
}else if(jQuery.browser.mozilla){
//Firefox
}else if(jQuery.browser.webkit){
//chrome or safari
}else if(jQuery.browser.opera){
//opera
}
if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 8){
IE8
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 7){
IE7
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
IE6
}

他の参考リンク

コメント

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