一、Web前端兼容性问题

一直以来，Web前端领域最大的问题就是兼容性问题，没有之一。

前端兼容性问题分三类：

• 浏览器兼容性
• 屏幕分辨率兼容性
• 跨平台兼容性

1、浏览器兼容性问题

第一次浏览器大战发生在上个世纪90年代，微软发布了IE浏览器，和网景公司的Netscape Navigator大打出手，1998年网景不得不将公司卖给AOL。没有了对手的IE不思进取，W3C标准支持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕食，主要包括Firefox，Chrome，Safari和Opera。.

2001年8月27日，微软发布IE6，时隔五年直到2006年才发布了IE7。2009年3月19日，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多方面做了很大改进，但在HTML5、CSS 3等标准支持方面仍落后于其他浏览器对手。这三个版本的IE是所有兼容性问题的最大根源，堪称前端噩梦。

IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”

IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”

IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”

IE11部分支持Flex、WebGL，可被判定为“较易兼容”

IE6、7、8、9可视为“老式浏览器”

IE10、11可视为“准现代浏览器”

Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”

浏览器与Windows版本份额

Statcounter的各项数据以2020年6月为基准。

http://gsa.statcounter.com/

statcounter全球/国内桌面浏览器份额：

Statcounter 全球/国内Windows版本份额：

2、屏幕分辨率兼容性问题

在不同的屏幕分辨率，浏览器页面展示差异很大。特别是屏幕分辨率较小时，容易发生布局错乱。为了解决这个问题，响应式UI框架应运而生。

主流桌面屏幕分辨率宽度集中在1280~1920，高度集中在720~1080；

主流平板屏幕分辨率宽度集中在962~1280，高度集中在601~800。

主流移动屏幕分辨率宽度集中在360~414，高度集中在640~896。

典型的桌面屏幕分辨率：1920x1080

典型的便携屏幕分辨率：1366x768

典型的平板屏幕分辨率：768x1024

典型的移动屏幕分辨率：360x640

Bootstrap定义（参考系是逻辑分辨率）：

注：Bootstrap5新增xxl，Bootstrap3中的lg>=1200px，无576px档。

手机屏幕分辨率说明

由于手机屏幕尺寸过小，使用原始分辨率会使得页面显示过小，因此使用了逻辑分辨率，用倍数放大的方法来保证兼容性。比如iOS app的UI资源区分@1x、@2x和@3x，这就是指原始分辨率对逻辑分辨率的倍数，被称为设备像素比DPR。所以大部分人的手机分辨率都是1080x1920，在分类中却被归为了360x640。这个分辨率和CSS中的PX是一致的。

桌面屏幕分辨率说明

移动设备一开始就考虑了DPR，而Windwos桌面的分辨率由于历史原因却没有这一概念，于是Windwos引入了DPI，最初是设置DPI，后来是设置DPI比例。比如设置DPI比例=125%，你可以查询Chrome的window.devicePixelRatio，这时输出1.25，这说明DPI比例=DPR。但是大部分老程序并不支持DPI（Unaware），所以当你设置高DPI时，只能等比放大，字模糊到眼要瞎，最后落得空有大屏只能用超低分辨率。由于Chrome支持DPI，所以并不担心Web有DPI问题。但需要注意的是与手机屏幕分辨率不同，桌面分辨率要除以DPI比例，才是逻辑分辨率。如1920x1080设置DPI比例=1.25，逻辑分辨率实际为1536x864。

屏幕分辨率基础概念说明

注：各厂商概念有重名现象，请注意区分。

各平台屏幕分辨率份额

statcounter全球/国内桌面屏幕分辨率份额：

statcounter全球/国内移动屏幕分辨率份额：

3、跨平台兼容性问题

随着移动和平板市场的日益发展，Web在桌面、平板、移动平台上的兼容性问题日益突出。由于移动和平板是触摸式操作，与桌面的鼠标操作方式有很大差异，因此在不同平台上要做相应修改。为了解决这个问题，诞生了跨平台框架，在不同平台上，外观、布局、操作都有差异化修改。

各平台份额

statcounter全球/国内平台份额：

二、前端里程碑框架

在前端领域，随着技术的不断进步，逐步诞生了一些里程碑式的前端框架。这些前端框架，大致也是随着兼容性问题的发生、发展而诞生、发展的。

这些框架代表了前端应用当时先进、成熟、主流的开发方式与发展方向，兼容性问题也在这些框架的基础之上不断得到解决，大致也分为三个阶段：

一、DOM操作框架，代表框架：jQuery

二、响应式框架，代表框架：Bootstrap

三、前端MVC框架，代表框架：React、Angular、Vue

1、JQuery

2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本。jQuery是DOM操作时代前端框架最优秀，也几乎是唯一代表；但是在以React为代表的新式前端框架崛起之后，迅速没落。

• JQuery 1.x兼容IE6+浏览器
• JQuery 2.x兼容IE9+浏览器
• JQuery 3.x兼容IE9+浏览器

2、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浏览器

3、React

React 起源于 Facebook 的内部项目，在前端MVC框架大潮中诞生并走红。2013年5月开源，凭借Virtual Dom，JSX，Flux，Native等一大批创新特性，迅速吸引了大量开发人员，至今仍是最先进的前端JS框架。

4、Angular

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。由于Google不差钱，所以AngularJS经历颠覆性升级为Angular。Angular最大的特点就是大而全。

5、Vue

2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架，最初命名为Seed，后更名为Vue。

三、浏览器兼容框架

在前端发展的初期，大多数开发最关注的问题就是浏览器兼容问题，迫切需要兼容所有浏览器的JS和CSS框架。这阶段除了横空出世的jQuery，还有一些其它方面的兼容框架。

1、normalize.css

让不同的浏览器在渲染网页元素的时候形式更统一。

2、html5shiv.js

IE6~IE8识别HTML5标签，并且可以添加CSS样式。

3、respond.js

使IE6~IE8浏览器支持媒体查询。

四、响应式框架

有了jQuery等兼容框架的基础，开发人员的关注点，逐渐转移到越来越丰富的屏幕分辨率上，除开Bootstrap一家独大，越来越多的响应式框架也在奋起直追。

1、Semantic UI

https://github.com/semantic-org/semantic-ui

Semantic 是一个设计漂亮的响应式布局的语义化框架。

2、Bulma

https://github.com/jgthms/bulma

基于 Flexbox 的现代 CSS 框架

3、Tailwind

https://github.com/tailwindcss/tailwindcss

Tailwind是一个底层CSS 框架，快速 UI 开发的实用工具集，提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。另外Tailwind + Styled Component 简直是绝配（摘自知乎https://www.zhihu.com/question/337939566）。

4、Materialize

https://github.com/Dogfalo/materialize

A CSS Framework based on Material Design.

5、Foundation

https://github.com/foundation/foundation-sites

The most advanced responsive front-end framework in the world.

6、Pure.css

https://github.com/pure-css/pure

A set of small, responsive CSS modules

7、YAMLCSS

https://github.com/yamlcss/yaml

YAML is a modular CSS framework for truly flexible, accessible and responsive websites.

兼容IE6+浏览器（能兼容IE6的太稀少了）

五、跨平台框架

自2009年以来，由于Node.js生态的不断发展，前端开发的*大涨， AngularJS，BackboneJS，KnockoutJS等一批前端MVC框架开始出现。最终伴随着React、Angular、Vue等框架的脱颖而出，用前端框架开发移动、桌面应用的野心开始暴涨，开始关注不同平台的差异化，越来越多的跨平台框架开始出现。

1、Framework7

https://github.com/framework7io/framework7

Build iOS, Android & Desktop apps

 从上图可以看出，桌面版本比移动版本更紧凑，控件风格跟所在平台近似。支持三种主题：ios、 md、 aurora对应不同平台。

2、Ionic

https://github.com/ionic-team/ionic

build mobile and desktop apps

 从上图可以看出，主要针对移动平台优化，但通过API支持多种平台。

3、Onsen UI

https://github.com/OnsenUI/OnsenUI

develop HTML5 hybrid and mobile web apps

 从上图可以看出，主要针对移动平台优化，但通过API支持多种平台。

4、Quasar Framework

https://github.com/quasarframework/quasar

基于Vue构建响应式网站、PWA、SSR、移动和桌面应用

 Quasar将一些辅助CSS类附加到document.body：如desktop、mobile、touch、platform-[ios]、within-iframe等

5、UNI-APP 

https://github.com/dcloudio/uni-app

使用 Vue.js 开发所有前端应用的框架

 从上图可以看出，三种平台比较一致，但移动版本还比桌面版本还紧凑是什么意思？

6、横向对比

六、总结

兼容性问题总是伴随着平台的扩张而产生的，Web开发面临的终极问题就是多平台兼容性问题，根据不同产品，不同阶段做部分取舍，应用不同的框架而已。需要支持的平台，决定了你的选择。

新的框架或旧框架的新版本基本都不再支持IE，但国内还有5.65% 的IE用户，而且3.29%的WinXP，46.79%的Win7都是潜在的IE用户，所以可将其做为一个平台看待。

• IE Web
• Desktop Web
• Mobile Web
• Tablet Web
• Desktop Hybrid
• Mobile Hybrid
• Tablet Hybrid

注：React Native代表的Native技术不在本次讨论之列

1、浏览器兼容策略

国内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，。

看看知名网站对IE8的兼容性，

• 京东会提示“温馨提示：您当前的浏览器版本过低，存在安全风险，建议升级浏览器”，但是页面完全可以正确显示，几乎没有什么异常发生，看来兼容工作很到位。
• 淘宝会出现很多页面异常，说明IE兼容工作要求不高，基本正常即可，只是象征性的加了几条兼容性内容。
• 去哪儿网也会出现很多页面异常，但页面布局还是正常的，看来也是尽力而为，不做要求。
• 腾讯的页面只有一个立即更新按钮，一贯地友好。
• 知乎直接404，好吧，强大。

兼容IE的建议：

一、建议不做任何兼容，IE6~11直接显示升级浏览器按钮。

二、如果一定要兼容，后端返回IE专用页面，至少兼容IE8。

2、屏幕分辨率兼容策略

屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。可以参考去哪儿网的做法，把内容分成三类：移动端主菜单与导航栏；主要内容；扩展内容。屏幕分辨率高于480，显示主要内容、扩展内容。屏幕分辨率低于480，显示移动端主菜单与导航栏、主要内容。

如果你的应用是管理软件，则最好考虑兼容桌面屏幕、便携屏幕和移动屏幕三种。Bootstrap5新增了超超大屏幕，则就是基于这种考虑。这时候，可以加入侧边栏自动隐藏/打开，主要内容用Flex方式组织，可以在页面中并排显示多页（类似于Word的页面视图）。

3、跨平台兼容策略

大型网站，手机网站与桌面网站是不同的入口，因此不存在兼容，是两个单独的应用程序。对于流量较小的网站，平台的兼容策略主要是应用响应式框架，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。

 （全文完）

Web前端兼容性指南