5 LOG

[jQuery] ユーザーエージェントの判定 スマホ(iPhone、iPod、Android)、タブレット、IE11にも対応

image

iPhone、iPod、iPad、Androidを判定する。
ついでにIEも。ついでにバージョンも。あとタブレットも。

ちょくちょく使うので、作っておきました。

github:searchUA

  • ブラウザ判定
  • ブラウザのバージョン検出
  • タブレット判定
    var ua = {};
    ua.name = window.navigator.userAgent.toLowerCase();

    ua.isIE = (ua.name.indexOf('msie') >= 0 || ua.name.indexOf('trident') >= 0);
    ua.isiPhone = ua.name.indexOf('iphone') >= 0;
    ua.isiPod = ua.name.indexOf('ipod') >= 0;
    ua.isiPad = ua.name.indexOf('ipad') >= 0;
    ua.isiOS = (ua.isiPhone || ua.isiPod || ua.isiPad);
    ua.isAndroid = ua.name.indexOf('android') >= 0;
    ua.isTablet = (ua.isiPad || (ua.isAndroid && ua.name.indexOf('mobile') < 0));

    if (ua.isIE) {
        ua.verArray = /(msie|rv:?)\s?([0-9]{1,})([\.0-9]{1,})/.exec(ua.name);
        if (ua.verArray) {
            ua.ver = parseInt(ua.verArray[2], 10);
        }
    }
    if (ua.isiOS) {
        ua.verArray = /(os)\s([0-9]{1,})([\_0-9]{1,})/.exec(ua.name);
        if (ua.verArray) {
            ua.ver = parseInt(ua.verArray[2], 10);
        }
    }
    if (ua.isAndroid) {
        ua.verArray = /(android)\s([0-9]{1,})([\.0-9]{1,})/.exec(ua.name);
        if (ua.verArray) {
            ua.ver = parseInt(ua.verArray[2], 10);
        }
    }

IEが11からユーザーエージェントが変わり、「MSIE」の文字列がなくなりました。

なので、IEの判定方法が、「MSIE」と「Trident」で判定します。
iPhone、iPod、iPad、Androidは、普通にwindow.navigator.userAgentから判定。
iPhone、iPod、iPadの場合は、iOS、 iPad、Android(mobileが入ってない場合)はTabletとして判定しています。

IEのバージョンは、IE10以下の場合は「msie x.0」、IE11の場合は「rv:11.0」となるので。正規表現を使って検出しています。
iOS、Androidも同様。
verは小数点以下は切り捨てています。(Android 2.3はver:2になります。)

uaオブジェクトに結果を入力していますので、
例えば、IEの場合は

if (ua.isIE) {
    alert('IE!');
}

とか、ie8以下の場合は

if (ua.isIE && ua.ver <= 8) {
    alert('ie8以下!');
}

使い方としては、例えば<body>にclassを付ける場合、

    if (ua.isIE) {
        $('body').addClass('ie ie_' + ua.ver);
    }
    if (ua.isiPhone) {
        $('body').addClass('iPhone');
    }
    if (ua.isiPod) {
        $('body').addClass('iPod');
    }
    if (ua.isiPad) {
        $('body').addClass('iPad');
    }
    if (ua.isiOS) {
        $('body').addClass('iOS iOS_' + ua.ver);
    }
    if (ua.isAndroid) {
        $('body').addClass('android android_' + ua.ver);
    }
    if (ua.isTablet) {
        $('body').addClass('tablet');
    }

のような使い方も出来ます。

別ファイルにして、クロージャーにしたものをgithubにあげてあります。