使用Moderniz庫可以對H5的特性進行檢測,下載網址: https://modernizr.com

// 在HTML 中的head標簽中導入
<script src="/modernizr.min.js"></script>// ps:注意src的路徑

畫布(canvas)特性檢測:

if (Modernizr.canvas){// 開始畫...
} else {// 瀏覽器不提供canvas原始支持
}

畫布文本(Canvas Text)

if (Modernizr.canvastext){// 畫寫文字
} else {// 瀏覽器不提供canvas text 原始支持
}

視頻(Video)

if (Modernizr.video){// 開始播放某個視頻
} else {// 瀏覽器不提供video 原始支持
}

視頻格式(Video formats)

if (Modernizr.video){// 可以播放視頻,但播放哪一種格式的視頻呢?if(Modernizr.video.ogg) {// 嘗試在 Ogg 容器中使用 Ogg Theora + Vorbis} else if (Modernizr.video.h264) {// 嘗試在 MP4 容器中使用 H.264 視頻+AAC 音頻}
} 

本地存儲(Local Storage)

if (Modernizr.localstorage) {   // 注意大小寫// 可以使用本地存儲了
} else {// 瀏覽器沒有提供本地存儲的原生支持;
}

Web Workers

if (Modernizr.webworkers){// 可以使用webworkers
} else {// 瀏覽器沒有提供 web worker 的原生支持
}

離線 Web 應用(Offline Web Applications)

if (Modernizr.applicationcache) {// window.applicationCache 存在!
} else {// 瀏覽器沒有提供原生的離線支持
}

地理位置(Geolocation)

if (Modernizr.geolocation) {// 可以使用地理位置
} else {// 瀏覽器沒有提供原生的地理位置支持
}

參考 《HTML5揭秘》 P16~P28