当前位置: 首页 > 工具软件 > Feature.js > 使用案例 >

html 测量插件,Feature.js-轻量级浏览器特性检测JavaScript库插件

华煜祺
2023-12-01

Feature.js是一款轻量级的浏览器特性检测JavaScript库插件。该插件运行速度快,使用简单,文件只有1kb大小。通过Feature.js你可以检测客户浏览器是否支持某些特性,并针对这些特性编写代码。

Feature.js会自动在页面初始化时进行加载,但是它不会自动进行特性检测,直到你在代码中调用它时才会进行指定特性的检测。

通过Feature.js你可以对浏览器进行特性检测,例如检测浏览器是否支持CSS 3D transforms,为支持该特性的浏览器编写代码来操纵元素进行3D转换,在不支持该特性的浏览器中可以执行其他的操作。

使用方法

首先你需要在页面中引入feature.js文件,你不需要对其进行初始化,只需引入文件即可。

接着你就可以使用特性检测来检测浏览器是否支持某些特性,例如:

if (feature.webGL) {

console.log("你的浏览器支持WebGL");

} else {

console.log("你的浏览器不支持WebGL");

}

如果你希望像Modernizr那样当浏览器支持某些特性时,在元素上添加相应的class,可以像下面这样操作:

if (feature.webGL) {

document.documentElement.className += " webgl";

}

如果你使用jquery,那操作就更简单了:

if (feature.webGL) {

$("html").addClass("webgl");

}

你也可以同时进行多选特性的检测:

if (feature.canvas && feature.webGL) {

console.log("你的浏览器支持Canvas和WebGL")

}

如果你的JavaScript代码只有在浏览器支持某些特性时才有意义,那么你可以在一个函数中检测这些特性,如果浏览器不支持这些特性,直接返回,否则才执行相应的JS代码。

(function() {

if (!feature.webGL || !feature.svg) {

console.log("Stopping… WebGL or SVG isn’t supported");

return;

}

console.log("Browser supports both WebGL & SVG");

})();

API reference

下面是Feature.js可进行的浏览器检测的特性列表。

feature.async

feature.addEventListener

feature.canvas

feature.classList

feature.cors

feature.contextMenu

feature.css3Dtransform

feature.cssTransform

feature.cssTransition

feature.defer

feature.deviceMotion

feature.deviceOrientation

feature.geolocation

feature.historyAPI

feature.placeholder

feature.localStorage

feature.matchMedia

feature.pictureElement

feature.querySelectorAll

feature.remUnit

feature.serviceWorker

feature.sizes

feature.srcset

feature.svg

feature.touch

feature.viewportUnit

feature.webGL

 类似资料: