84

Modernizr JS ライブラリを使用して、一部のブラウザー プロパティを検出し、表示するコンテンツと表示しないコンテンツを決定したいと考えていました。

HTML5 と SWF の両方を出力するPano2VRというアプリがあります。iOS デバイス ユーザー向けの HTML5 が必要です。

ただし、IE はこの「HTML5」出力をまったくレンダリングしません。彼らの出力は CSS3 3D 変換と WebGL を使用しているようです.1 つ以上は明らかに IE9 ではサポートされていません.

そのため、これらのユーザーには Flash のバージョンを表示する必要があります。私は IFRAME を使用し、Modernizr スクリプトを介して SRC を渡すか、ブラウザーに応じて正しい IFRAME コードを document.write することを計画していました。

これらはすべて、Modernizr を使用して単に IE か IE でないかを検出する方法につながりますか? または、CSS 3d 変換を検出しますか?

または、これを行う別の方法はありますか？

4

9 に答える 9

196

Modernizr はブラウザそのものを検出するのではなく、どの機能が存在するかを検出します。

このような単純な検出スクリプトをフックして、それを使用して選択を行うことができます。必要な場合に備えて、バージョン検出も含めました。IE の任意のバージョンのみを確認したい場合は、「MSIE」の値を持つ navigator.userAgent を探すだけです。

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

次に、次のことを簡単に確認できます。

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;
于 2012-11-20T19:14:51.820 に答える
20

Modernizrを使用して、SVG SMILアニメーションのサポートをチェックすることで、IE かどうかを単純に検出できます。

Modernizr セットアップにSMIL機能検出を含めた場合は、単純な CSS アプローチを使用して、 Modernizr がhtml要素に適用する.no-smilクラスをターゲットにすることができます。

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

あるいは、次のように単純な JavaScript アプローチで Modernizr を使用することもできます。

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

IE/Edge はいつかSMILをサポートするかもしれませんが、現時点ではそうする予定はありません。

参考までに、caniuse.comのSMIL互換性チャートへのリンクを次に示します。

于 2015-03-25T00:19:21.747 に答える
12

CSS 3D 変換の検出

Modernizrは CSS 3D 変換を検出できます。の真実性はModernizr.csstransforms3d、ブラウザがそれらをサポートしているかどうかを教えてくれます。

上記のリンクを使用すると、Modernizr ビルドに含めるテストを選択でき、探しているオプションがそこで利用できます。

IE を具体的に検出する

または、 user356990が回答したように、IE と IE だけを検索する場合は、条件付きコメントを使用できます。グローバル変数を作成する代わりに、HTML5 Boilerplate の<html>条件付きコメント トリックを使用してクラスを割り当てることができます。

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

すでに jQuery が初期化されている場合は、 で確認できます$('html').hasClass('lt-ie9')。条件付きで jQuery 1.x または 2.x をロードできるように、使用している IE のバージョンを確認する必要がある場合は、次のようにします。

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

注: IE 条件付きコメントは、IE9 までのみサポートされています。IE10 以降、Microsoft はブラウザー検出ではなく機能検出の使用を推奨しています。

どちらの方法を選択しても、次にテストします

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

||もちろん、それを文字通りに受け取らないでください。

于 2013-09-05T07:15:11.973 に答える
9

html5 ボイラープレートが行っていた JS バージョン (機能検出と UA スニッフィングの組み合わせを使用) を探している場合:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}
于 2013-11-07T13:56:40.720 に答える
3

さて、このトピックについてさらに調査を行った後、IE 10+ をターゲットとするために次のソリューションを使用することになりました。IE10 と 11 は -ms-high-contrast メディア クエリをサポートする唯一のブラウザーであるため、これは JS を使用しない適切なオプションです。

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

完璧に動作します。

于 2018-12-19T17:28:49.350 に答える
2

CSS のトリックには、IE 11 を対象とする適切な解決策があります。

http://css-tricks.com/ie-10-specific-styles/

.NET と Trident/7.0 は IE に固有のものであるため、IE バージョン 11 の検出に使用できます。

次に、コードは属性「data-useragent」を使用してユーザー エージェント文字列を html タグに追加するため、IE 11 を具体的にターゲットにすることができます...

于 2014-12-19T15:52:52.690 に答える
0

ハックを使用して< !-- [if IE] > 、通常の js コードでテストされるグローバル js 変数を設定できます。少し醜いですが、私にとってはうまくいきました。

于 2013-02-25T16:43:35.637 に答える