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

Steve 发表于 Dev

史蒂夫

我想使用Modernizr JS库检测某些浏览器属性，以确定要显示或不显示哪些内容。

我有一个名为Pano2VR的应用程序，它可以同时输出HTML5和SWF。我需要用于iOS设备用户的HTML5。

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

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

所有这些导致我如何使用Modernizr来仅检测IE或不检测IE？还是检测CSS 3d转换？

还是有其他方法可以做到这一点？

以太曼

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

因此，我启动了许多浏览器，并直接检查了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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。