Question

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

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

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

因此，对于那些用户，我需要显示Flash版本。我打算使用IFRAME并通过Modernizr脚本或document.write传出SRC，根据浏览器写出正确的IFRAME代码。

所有这些导致我如何使用Modernizr来检测IE或IE？或者检测CSS 3d变换？

或者还有另一种方法吗？

Answer 1

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;

Answer 2

通过检查SVG SMIL 动画支持，您可以使用Modernizr来检测IE或不是IE。

如果您在Modernizr设置中包含 SMIL 功能检测，则可以使用简单的CSS方法，并定位Modernizr应用于的 .no-smil 类 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 兼容性图表的链接。

Answer 3

检测CSS 3D变换

Modernizr can detect CSS 3D transforms，是的。 Modernizr.csstransforms3d的真实性将告诉您浏览器是否支持它们。

上面的链接允许您选择要包含在Modernizr构建中的测试，并且您可以在那里找到您要查找的选项。

具体检测IE

或，如用户356990的回答，如果您单独搜索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的IE9。从IE10开始，Microsoft鼓励使用功能检测而不是浏览器检测。

无论您选择哪种方法，都可以使用

进行测试

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

当然，不要从字面上理解||。

Answer 4

如果您正在寻找使用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;
}

Answer 5

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

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

.NET和Trident / 7.0是IE独有的，因此可用于检测IE版本11.

然后代码将用户代理字符串添加到html标记中，其属性为“data-useragent＆＃39;”，因此IE 11可以专门针对...

Answer 6

您可以使用< !-- [if IE] > hack设置一个全局js变量，然后在你的普通js代码中进行测试。有点难看，但对我来说效果很好。

Answer 7

我需要检测IE与大多数其他内容，我不想依赖于UA字符串。我发现在Modernizr中使用es6number完全符合我的要求。我并不太关心这种变化，因为我不认为IE会支持ES6号码。所以现在我知道任何版本的IE与Edge / Chrome / Firefox / Opera / Safari之间的区别。

此处有更多详情：http://caniuse.com/#feat=es6-number

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

Answer 8

好吧，在对该主题进行了更多研究之后，我最终使用了以下针对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 */  
}

完美运行。

Answer 9

我同意我们应该测试一下功能，但是很难找到一个简单的答案：“'现代浏览器'支持哪些功能而不是'旧浏览器'支持什么？”

因此，我启动了许多浏览器，并直接检查了Modernizer。我添加了一些我绝对需要的功能，然后添加了“ inputtypes.color”，因为它似乎涵盖了我关心的所有主要浏览器：Chrome，Firefox，Opera，Edge ...和NOT IE11。现在，我可以建议用户最好使用Chrome / Opera / Firefox / Edge。

这就是我使用的-您可以编辑事物列表以测试您的特定情况。如果缺少任何功能，则返回false。

/**
 * Check browser capabilities.
 */
public CheckBrowser(): boolean
{
    let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"];

    // Lets see what each browser can do and compare...
    //console.log("Modernizr", Modernizr);

    for (let i = 0; i < tests.length; i++)
    {
        // if you don't test for nested properties then you can just use
        // "if (!Modernizr[tests[i]])" instead
        if (!ObjectUtils.GetProperty(Modernizr, tests[i]))
        {
            console.error("Browser Capability missing: " + tests[i]);
            return false;
        }
    }

    return true;
}

这是“ inputtypes.color”所需的GetProperty方法。

/**
 * Get a property value from the target object specified by name.
 * 
 * The property name may be a nested property, e.g. "Contact.Address.Code".
 * 
 * Returns undefined if a property is undefined (an existing property could be null).
 * If the property exists and has the value undefined then good luck with that.
 */
public static GetProperty(target: any, propertyName: string): any
{
    if (!(target && propertyName))
    {
        return undefined;
    }

    var o = target;

    propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1");
    propertyName = propertyName.replace(/^\./, "");

    var a = propertyName.split(".");

    while (a.length)
    {
        var n = a.shift();

        if (n in o)
        {
            o = o[n];

            if (o == null)
            {
                return undefined;
            }
        }
        else
        {
            return undefined;
        }
    }

    return o;
}

使用Modernizr检测IE的正确方法？

9 个答案:

检测CSS 3D变换

具体检测IE