h5 瀏覽器兼容性問題：
瀏覽器兼容性情況可以在這個網站查詢 https://caniuse.com/
綠色代表完全支持，黃色代表部分支持，紅色代表不支持
右上角的黃色小短杠表示要加一些廠商前綴
兼容性測試：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> header,footer{ width:100%; height:50px; } header{ background:pink; } footer{ background:lightgreen; } </style> </head> <body> <header>header</header> <footer>footer</footer> </body> </html>
IE9-11
IE8-
解決方法：引入html5shiv https://www.bootcdn.cn/html5shiv/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> header,footer{ width:100%; height:50px; } header{ background:pink; } footer{ background:lightgreen; } </style> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script> </head> <body> <header>header</header> <footer>footer</footer> </body> </html>
JS瀏覽器兼容性：
錯誤寫法：
<script>
if(requestAnimationFrame){
//...
}
</script>
因為如果屬性不存在，則表示調用了未聲明的變量，會導致報錯
正確寫法：
<script>
if(window.requestAnimationFrame){
//...
}
</script>
如果不存在，則調用的是未定義的屬性，並不會報錯
但是這種判斷並不周全，因為有些瀏覽器是支持的，但是可能需要廠商前綴
比較嚴謹的寫法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> header,footer{ width:100%; height:50px; } header{ background:pink; } footer{ background:lightgreen; } </style> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script> </head> <body> <header>header</header> <footer>footer</footer> <script> var requestAnimationFrame=window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.moxRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || //requestAnimationFrame跟setTimeout很類似，瀏覽器不支持時可以自己寫一個類似效果的函數 function(fn){ setTimeout(fn,16); }; requestAnimationFrame(function(){ console.log("animation..."); }) </script> </body> </html>
css3瀏覽器兼容性：
通過編輯器插件，自動補全廠商前綴
或者使用工程化手段自動添加
在vscode中安裝插件 ：
1、擴展輸入Autoprefixer，點擊安裝，然后點擊重新加載
2、打開設置->搜索autoprefixer->點擊在setting.json里編輯
3、加入這段代碼：
"autoprefixer.browsers": [ "last 0 versions", "> 5%" ]
4、在需要添加前綴的css文件上，右鍵點擊命令面板，輸入Autoprefixer CSS就好啦
如何兼容IE：
點擊download
搜索你需要檢測的特性，點擊+號（檢測所有特性太龐大，沒有必要）
然后點擊build-download
在文件中引入剛才下載的js文件
你會發現在支持flex屬性的瀏覽器上，html添加了flexbox的類名：
而在不支持的瀏覽器上，html添加了no-flexbox的類名：
這樣就可以分開寫兼容狀態和不兼容狀態的樣式：
別忘了在vscode中按住ctrl+shift+p，輸入autoprefixer:run，添加廠商前綴
header,footer{ width:100%; height:50px; } header{ background:pink; } /* 兼容flex */ .flexbox header{ display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align:center; align-items:center; } /* 不兼容flex */ .no-flexbox header{ text-align:center; line-height: 50px; } footer{ background:lightgreen; }