通过功能检测来判断浏览器的功能支持情况
欢迎大家来到我们 Modern Web ● 提升网站兼容性从这里开始 系列的功能检测来判断浏览器出现问题的专题，以前，要知道用户的浏览器是否支持一个特殊功能的方式通常是检测浏览器的类型以及版本，然后选择相应的代码段执行，这个过程通常称之为User Agent检测，简称UA检测。但是这个过程是非常容易出错，容易被欺骗的，代码逻辑复杂，而且随着浏览器版本的增加，维护困难。
现在的Web开发中，我们会有更好的方式来解决这些问题。现在基本不检测浏览器的类型和版本，而是改用本地的方法和对象来检测用户的浏览器是不是支持某些功能，我们称之为功能检测。通过功能检测，我们能够知道某个方法在某个浏览器上是否真正可用，调用更加安全，逻辑也更加清楚。
1 使用dev.modern.ie网站检测:
点击链接https://dev.windows.com/zh-cn/microsoft-edge/tools/staticscan/在输入框输入网站URL，点击查询即可检测网站问题：
如果出现“浏览器检测”问题，如下图所示：
2 使用功能检测
表A-5给出了不再推荐的做法以及提倡的做法，仅供参考。
|
错误 |
//错误示范，极不推荐 if (navigator.userAgent.indexOf("MSIE 7") > -1) { // Only for IE7 } |
|
正确 |
//√正确示范，推荐做法 function load() { if ('localStorage' in window) { // Now use local storage return; } } |
表A-5 功能检测错误示范和推荐用法
推荐使用自动化工具Modernizr来进行功能检测。关于工具的更加详细的介绍以及讲解，建议访问：http://akms/feature-detection
Appendix：
下面的一些网站链接介绍如何使用改善网站的兼容性供大家参考：
§Web App Platform: http://dev.windows.com
§Microsoft Edge开发者博客: http://blogs.windows.com/msedgedev/
§F12开发者工具使用: http://aka.ms/mva-f12
§微软技术培训： http://aka.ms/feature-detection
同时，我们提供了微信版本的dev.modern.ie工具，扫描下方二维码，轻松测试网站。
网站兼容性测试（微信版）
浙公网安备 33010602011771号