HTML5中Modernizr类库的作用和使用 - 山高我为峰

Modernizr 是一个用来检测浏览器功能支持情况的JavaScript 库。
通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况。

使用Modernizr类库和使用其他第三方类库的方法是一样的它分为一下几个步骤“
1、在官网上下载Modernizr类库。modernizr官网：https://modernizr.com/
2、通过JavaSctipt标签引入Modernizr类库
3、通过具体的代码实现对HTML特性的检测。
这里我们写了一个非常简单的例子来检测浏览器是否支持HTML5中的Canvas API，示例如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>通过Modernizr检测HTML5特性</title>
    </head>
    <body>
        <article>
            <h1>通过Modernizr检测HTML5特性</h1>
        </article>
        <div id="result-stub">
            <span id="msg" style="color:red;"></span>
        </div>
        
        <script >
            window.onload = function() {
                     //通过Modernizr.对浏览器canvas功能进行检测
                     if (Modernizr.canvas) {
                            $('#msg').text('本浏览器支持Canvas API');
                    }else{
                             $('#msg').text('本浏览器不支持Canvas API');
                         }
            }
        </script>
        //引入modernizr库和jquery库
        <script src="../js/jquery.js"></script>
        <script src="../js/modernizr.js"></script>
    </body>
</html>

这些内容关乎到HTML5中第三方类库的使用

posted on 2017-06-14 14:32 山高我为峰阅读(909) 评论(0) 收藏举报

刷新页面返回顶部