7

我是 Modernizr 的新手，我只是在寻找一种简单的方法来检查整体浏览器的兼容性。我已经生成了一个 Modernizr 脚本来仅测试我的 Web 应用程序中最重要的组件，这些组件高度依赖于 HTML5、CSS3 和现代 JavaScript 方法。有没有办法同时运行所有这些测试？查看文档，我看到了很多方法来逐个测试每个功能，但我没有看到一种方法可以一次完成所有操作。我希望做这样的事情：

伪代码

if (Modernizr.testAll()) {
  // Load site
} else {
  // Redirect to compatibility page
}
4

7 回答 7

6

事实证明，所有测试都作为布尔值直接存储在Modernizr对象中，因此，如果您正在构建具有大量功能依赖项的应用程序并且想要一次测试它们，请使用以下命令：

var supported = true;
for (var feature in Modernizr) {
  if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) {
    supported = false;
    break;
  }
}
于 2013-08-31T23:43:08.717 回答
0

如果要在浏览器中显示所有特征检测，请使用此代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => {
        if (typeof Modernizr[feature] === "boolean") {
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(
                element
            );
            console.log(feature, Modernizr[feature]);
        }
        }
    );
</script>
</body>
</html>

于 2020-06-02T12:59:04.520 回答
0

如果要在浏览器中显示所有特征检测，请使用此代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => {
        if (typeof Modernizr[feature] === "boolean") {
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(element);
        }
    });
</script>
</body>
</html>
于 2020-06-02T13:01:41.163 回答
0

我一直在寻找同样的东西，我想出了以下代码：

for (var feature in Modernizr) 
{
    if (typeof Modernizr[feature] === "boolean")
    {
        console.log("Modernizr_" + feature + ": " +Modernizr[feature]);

        for (var subFeature in Modernizr[feature])
        {
            if (typeof Modernizr[feature][subFeature] === "boolean")
            {
                console.log("Modernizr_" + feature + "_"+ subFeature + ": " + Modernizr[feature]);          
            }
        }
    }


}

！

于 2015-08-24T08:07:07.640 回答
0

我个人为此苦苦挣扎。但最终在一天结束时找到了答案。您可以在下面使用我的代码，它将显示 Modernizr 功能及其值的完整列表：

<script type="text/javascript">

    $(document).ready(function () {});
</script>

<script type="text/javascript">
    $(function () {
        function ListAllMOdernizrFeatures() {


            var TotalString = "Modernizr features<br><br>";
            var arrModernizrFeatures = new Array();


            for (var feature in Modernizr) {

                if (typeof Modernizr[feature] === "boolean") {
                    console.log("Modernizr_" + feature + ": " + Modernizr[feature]);
                    arrModernizrFeatures.push("Modernizr." + feature + ": " + Modernizr[feature])

                    for (var subFeature in Modernizr[feature]) {
                        var ModernizrFeature = Modernizr[feature];
                        if (typeof ModernizrFeature[subFeature] === "boolean") {
                            arrModernizrFeatures.push("Modernizr." + feature + subFeature + ": " + ModernizrFeature[subFeature]);
                        }

                    }
                }

            }

            arrModernizrFeatures.sort(); // in lexicographical order

            for (var PropertyIterator = 0; PropertyIterator < arrModernizrFeatures.length; PropertyIterator++) {
                TotalString += PropertyIterator + 1 + ". " + arrModernizrFeatures[PropertyIterator] + "<br>";
            };
            document.getElementById("ListFeatures").innerHTML = TotalString;
        }

        setTimeout(ListAllMOdernizrFeatures, 100);

    });

</script>
于 2019-07-17T20:57:27.730 回答
0

使用现代 Javascript (ECMAScript 2017)，您可以使用如下Object.values方法：

if (Object.values(Modernizr).indexOf(false) !== -1) {
    console.log('Update your browser (and avoid IE/Edge )')
}

Object.values将从中提取所有测试结果Modernizr到一个数组中，然后indexOf(false)测试是否有任何数组项为假（即测试失败）。

于 2019-07-26T22:38:01.520 回答
0

一种更清洁的方式，对我有用，而且都在一条线上

Object.values(Modernizr).indexOf(false) === -1

于 2019-02-08T08:53:46.950 回答