ブラウザ判定・デバイス判定

jqueryに限らず、ブラウザによって動作しなかったり表示しなかったりすることがあると思います。
そのため、特定のブラウザでは問題の動作をさせなくしたり、代わりの動作をさせたりするのですが、そういう時にブラウザの種類やバージョンを判定する必要があります。
実はjQueryではブラウザ判定できないので、jsで判定することになります。

sample

サンプルの解説

<button>ブラウザ判定</button>

上のサンプルのhtmlはこうなっています。
jsのコードは以下の通り。

function checkB(){
    var userAgent = window.navigator.userAgent.toLowerCase();
    var appVersion = window.navigator.appVersion.toLowerCase();

    if (userAgent.indexOf('opera') != -1) {
        return 'opera';
    } else if (userAgent.indexOf('msie') != -1){
        /*@cc_on
        @if (@_jscript_version == 10)
            return 'ie10';
        @elif (@_jscript_version == 9)
            return 'ie9';
        @elif (@_jscript_version == 5.8)
            return 'ie8';
        @else
            if (appVersion.indexOf("msie 6.") != -1) {
                return 'ie6';
            } else if (appVersion.indexOf("msie 7.") != -1) {
                return 'ie7';
            } else {
                return 'old ie';
            }
        @end
        @*/
    } else if (userAgent.indexOf('chrome') != -1) {
        return 'chrome';
    } else if (userAgent.indexOf('safari') != -1) {
        return 'safari';
    } else if (userAgent.indexOf('firefox') != -1) {
        return 'firefox';
    } else if (userAgent.indexOf('gecko') != -1) {
        return 'gecko';
    } else {
        return false;
    }
}

$(function() {
    var bName = checkB();
    $("button").click(function(){
        alert(bName);
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

userAgentを使ってブラウザを調べ、@cc_onステートメントとappVersionを使ってIEのバージョンを確認しています。
@cc_onステートメントを使っている場合は、コメントアウトしている/*@cc_on～@*/は必要な部分です。コメントアウトのまま利用してください。
ちなみに、IE TesterはappVersionにエラーか何かあるらしく、うまく判定結果が出ないようです。

IEのバージョン判定はappVersionだけでもできるのですが、IE10はどうやら2桁数字のためうまく判定できないようです。
バージョンの切り分けはIE9以上とかになると思うので、IE10かどうかという判定は現時点であまりすることもないのではないかな・・・と思います。

なお、実はuserAgentの判定の順序も重要で、operaより先にIEの判定をしてしまうと、operaもIEと判定してしまうとか、いろいろあります。

戻る

Top