其實(shí)Detector.js插件的代碼很短，但是功能很全狈蚤，
（1）判斷canvas兼容困肩。
（2）判斷webgl兼容性。
（3）在頁面添加不兼容提示信息脆侮。
這三個(gè)功能已經(jīng)對(duì)兼容性檢測足夠了锌畸。使用方式也很簡單：
首先，將插件引入到頁面：
[html]view plaincopy
然后靖避，在js里面添加一個(gè)判斷：
[javascript]view plaincopy
if(?!?Detector.webgl?)?Detector.addGetWebGLMessage();
就實(shí)現(xiàn)了兼容性的檢測潭枣，是不是很簡單，去測試一下吧筋蓖。
下面卸耘，附上Detector.js插件代碼：
[javascript]view plaincopy
/**
*?@author?alteredq?/?http://alteredqualia.com/
*?@author?mr.doob?/?http://mrdoob.com/
*/
varDetector?=?{
canvas:?!!?window.CanvasRenderingContext2D,
webgl:?(function()?{
try{
varcanvas?=?document.createElement('canvas');return!!?(?window.WebGLRenderingContext?&&?(?canvas.getContext('webgl')?||?canvas.getContext('experimental-webgl')?)?);
}catch(?e?)?{
returnfalse;
}
}?)(),
workers:?!!?window.Worker,
fileapi:?window.File?&&?window.FileReader?&&?window.FileList?&&?window.Blob,
getWebGLErrorMessage:function()?{
varelement?=?document.createElement('div');
element.id?='webgl-error-message';
element.style.fontFamily?='monospace';
element.style.fontSize?='13px';
element.style.fontWeight?='normal';
element.style.textAlign?='center';
element.style.background?='#fff';
element.style.color?='#000';
element.style.padding?='1.5em';
element.style.width?='400px';
element.style.margin?='5em?auto?0';
if(?!this.webgl?)?{
element.innerHTML?=?window.WebGLRenderingContext???[
'Your?graphics?card?does?not?seem?to?support?WebGL.',
'Find?out?how?to?get?it?here.'
].join('\n')?:?[
'Your?browser?does?not?seem?to?support?WebGL.
',
'Find?out?how?to?get?it?here.'
].join('\n');
}
returnelement;
},
addGetWebGLMessage:function(?parameters?)?{
varparent,?id,?element;
parameters?=?parameters?||?{};
parent?=?parameters.parent?!==?undefined???parameters.parent?:?document.body;
id?=?parameters.id?!==?undefined???parameters.id?:'oldie';
element?=?Detector.getWebGLErrorMessage();
element.id?=?id;
parent.appendChild(?element?);
}
};
//?browserify?support
if(typeofmodule?==='object')?{
module.exports?=?Detector;
}
