正确的使用方法Modernizr的检测IE？(Correct way to use Moderniz

这可能是一个愚蠢的问题，但我想用Modernizr的JS库来检测某些浏览器属性，以确定哪些内容，以显示或不显示。

我有一个名为应用Pano2VR它输出HTML5和SWF。我需要为iOS设备用户的HTML5。

然而，IE根本不会呈现这个“HTML5”输出。看来他们的输出使用CSS3 3D变换和WebGL，一个或多个不支持显然在IE9。

因此，对于这些用户，我需要显示的Flash版本。我正打算使用一个IFRAME，要么通过Modernizr的脚本通过SRC或文件撰写了根据浏览器正确的IFRAME代码。

所有这一切导致了我如何使用Modernizr的检测只是IE或IE不？或CSS 3D转换检测？

还是有另一种方式做到这一点？

Answer 1:

Modernizr的不检测浏览器本身，它检测其功能和性能都存在，这是什么它试图做全JIST。

你可以尝试在这样一个简单的检测脚本挂钩，然后用它来进行选择。我已经包括版本检测以及万一那个真实需要。如果你只是想检查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;

Answer 2:

您可以使用Modernizr的检测只是IE或IE没有通过检查对SVG 的SMIL动画支持。

如果你已经包括在你的Modernizr设置SMIL特征检测，可以用一个简单的CSS的方法和目标是Modernizr的适用于HTML元素。没有-SMIL类：

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 /边缘说不定哪天支持SMIL，但目前还没有计划这样做。

作为参考，这里是在给SMIL兼容性图表链接caniuse.com 。

Answer 3:

检测CSS 3D转换

Modernizr的可检测CSS 3D变换，是的。的感实性Modernizr.csstransforms3d如果浏览器支持他们会告诉你。

上面的链接可以让你选择哪个测试在Modernizr的构建，包括，你正在寻找的选项可用那里。

检测IE具体

此外，作为user356990回答，你可以，如果你正在寻找单独的IE浏览器和IE浏览器使用条件的意见。而不是创建一个全局变量，你可以使用HTML5样板的<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;
}());

NB IE条件注释最多只支持IE9的包容性。 从IE10起，微软鼓励使用功能检测，而非浏览器检测。

无论您选择哪种方法，你会再与测试

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

不要拿|| 从字面上看，当然。

Answer 4:

如果你正在寻找一个JS版本（采用特征检测和嗅探UA的组合）的HTML5什么样板用来做：

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

Answer 5:

CSS技巧有一个很好的解决方案，以针对IE 11：

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

在.NET和Trident / 7.0是唯一的IE，以便可以用来检测IE版本11。

然后，该代码添加用户代理字符串与属性“数据的用户代理”的HTML标签，所以IE 11可以专门有针对性...

Answer 6:

您可以使用< !-- [if IE] >劈死设置，然后在得到你的正常的js代码测试一个全局变量的JS。有点难看，但一直行之有效我。

Answer 7:

我需要检测IE VS其他所有的事情，我不想依赖于UA字符串。我发现，使用es6number与Modernizr的也正是我想要的。我没有这种变化备受关注，因为我不希望IE永远支持ES6号码。所以，现在我知道IE的任何版本VS边缘/镀铬/火狐/歌剧/ Safari浏览器之间的差异。

更多详细的活动： http://caniuse.com/#feat=es6-number

请注意，我真的不关心Opera Mini的假阴性。你可能会。

Answer 8:

好了，关于这个话题做更多的研究后，我结束了使用下述溶液靶向IE 10+。由于IE10和11是其支持-MS-高对比度媒体查询的唯一浏览器，这是一个没有任何JS一个很好的选择：

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

完美的作品。

文章来源: Correct way to use Modernizr to detect IE?