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>