Web前端兼容性问题

[TOC] ## 概述 ## 分片率  ### JQuery 2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本。jQuery是DOM操作时代前端框架最优秀，也几乎是唯一代表；但是在以React为代表的新式前端框架崛起之后，迅速没落。 * JQuery 1.x兼容IE6+浏览器 * JQuery 2.x兼容IE9+浏览器 * JQuery 3.x兼容IE9+浏览器 ### Bootstrap Bootstrap原名Twitter Blueprint，由Mark Otto和Jacob Thornton开发，最经典的响应式CSS框架，在2011年8月19日作为开源项目发布。其核心是16列布局栅格系统，使用媒体查询设定阈值为超小屏幕，小屏幕，中等屏幕，大屏幕，超大屏幕创建不同的样式。 * Bootstrap 2兼容IE7+浏览器 * Bootstrap 3兼容IE8+浏览器 * Bootstrap 4兼容IE10+浏览器 * Bootstrap 5不兼容IE浏览器 ### 浏览器兼容框架 ### 1、normalize.css 让不同的浏览器在渲染网页元素的时候形式更统一。 ### 2、html5shiv.js IE6~IE8识别HTML5标签，并且可以添加CSS样式。 ### 3、respond.js 使IE6~IE8浏览器支持媒体查询。 ## 兼容策略 ### 浏览器兼容策略 国内XP用户还有3.29%，XP用户既升级不了IE9，也无法安装新版本Chrome和Firefox 。而IE用户还有 5.65%，考虑到Windows用户为87%，所以IE9+的份额应该要少于5.65%-3.29%*87%=2.79%。 也就是说IE8以下的用户要多于IE8以上的用户。所以支持单独支持IE9+ 浏览器没有实际意义，要么支持IE6，要么不支持IE， ### 屏幕分辨率兼容策略 屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。 可以参考去哪儿网的做法 把内容分成三类： 1. 移动端主菜单与导航栏； 2. 主要内容； 3. 扩展内容。 屏幕分辨率高于480，显示主要内容、扩展内容。 屏幕分辨率低于480，显示移动端主菜单与导航栏、主要内容。 ### 跨平台兼容策略 大型网站，手机网站与桌面网站是不同的入口，因此不存在兼容，是两个单独的应用程序