web-dev-qa-db-ja.com

Modernizrを使用してIEを検出する正しい方法は？

これは馬鹿げた質問かもしれませんが、Modernizr JSライブラリを使用して一部のブラウザプロパティを検出し、表示するコンテンツと表示しないコンテンツを決定したいと考えました。

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

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

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

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

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

html5cross-browsermodernizr
81
Steve

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;
187
Code Uniquely

Modernizr を使用して、SVGSMILアニメーションサポートをチェックすることにより、IEでなくIEを簡単に検出できます。

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

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

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

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

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

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

19
jacefarm

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')で確認できます。使用しているIEバージョンを確認して、条件付きでjQuery 1.xまたは2.xをロードできるようにする必要がある場合は、次のようにします。

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;
}());

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

どちらの方法を選択した場合でも、テストします

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

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

12
iono

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;
}
9
Pete B

CSSのトリックは、ターゲットIE 11に適したソリューションです。

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

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

次に、コードは属性 'data-useragent'を持つhtmlタグにユーザーエージェント文字列を追加するため、IE 11を具体的にターゲットにできます...

2
Julian Veling

さて、このトピックについてさらに調査した結果、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 */  
}

完全に動作します。

2
Oliver White

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

1
crazy4groovy

IE対他のほとんどすべてを検出する必要があり、UA文字列に依存したくありませんでした。 Modernizrでes6numberを使用すると、まさに私が望んでいたことがわかりました。 IEがES6 Numberをサポートすることを期待していないので、この変更についてはあまり心配していません。これで、IEとEdge/Chrome/Firefox/Opera/Safariのバージョンの違いがわかりました。

詳細はこちら： http://caniuse.com/#feat=es6-number

Opera Miniの偽陰性についてはあまり気にしていないことに注意してください。あなたかもしれません。

1
Splaktar