JavaScript => ブラウザの検出

前書き

ブラウザは、進化したので、Javascriptにもっと多くの機能を提供しました。しかし、多くの場合、これらの機能はすべてのブラウザで利用できるわけではありません。あるブラウザでは利用できるかもしれませんが、他のブラウザでは公開されないことがあります。また、これらの機能はブラウザによって異なる方法で実装されます。ブラウザの検出は、開発するアプリケーションがさまざまなブラウザやデバイスでスムーズに動作するようにするために重要になります。

備考

可能であれば、特徴検出を使用する。

ブラウザ検出を使用するいくつかの理由があります（たとえば、ブラウザプラグインをインストールする方法やキャッシュをクリアする方法をユーザーに指示するなど）がありますが、一般的に機能の検出はベストプラクティスと見なされます。ブラウザの検出を使用している場合は、それが絶対に救済されていることを確認してください。

Modernizrは、機能の検出を容易にする、人気のある軽量のJavaScriptライブラリです。

特徴検出方法

このメソッドは、ブラウザ固有のものが存在するかどうかを調べます。これはスプーフィングするのがより難しくなりますが、将来の保証が保証されていません。

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
    
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

正常にテストされました：

Firefox 0.8 - 44
Chrome 1.0 - 48
Opera 8.0 - 34
Safari 3.0 - 9.0.3
IE 6 - 11
エッジ - 20-25

ロブ・W

ライブラリメソッド

既存のJavaScriptライブラリを使用する方が簡単なアプローチもあります。これは、ブラウザー検出が正しいことを保証するのは難しい可能性があるため、実際の解決策があればそれを使用するのが理にかなっているからです。

1つの一般的なブラウザ検出ライブラリはBowserです。

使用例：

if (bowser.msie && bowser.version >= 6) {
    alert('IE version 6 or newer');
}
else if (bowser.firefox) {
    alert('Firefox');
}    
else if (bowser.chrome) {
    alert('Chrome');
}
else if (bowser.safari) {
    alert('Safari');
}
else if (bowser.iphone || bowser.android) {
    alert('Iphone or Android');
}

ユーザーエージェントの検出

このメソッドは、ユーザーエージェントを取得し、それを解析してブラウザーを検索します。ブラウザの名前とバージョンは、正規表現を介してユーザエージェントから抽出されます。これらの2つに基づいて、 <browser name> <version>が返されます。

ユーザエージェントマッチングコードに続く4つの条件ブロックは、異なるブラウザのユーザエージェントの違いを説明するためのものです。たとえば、オペラの場合、 Chromeレンダリングエンジンを使用しているため、その部分を無視する追加の手順があります。

この方法はユーザーが簡単に偽装することができます。

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

クレジットカード

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

JavaScript
ブラウザの検出

サーチ…

前書き

備考

特徴検出方法

ライブラリメソッド

ユーザーエージェントの検出