使用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

總結

以上是生活随笔為你收集整理的html5 --- 特性检测的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。