Web前端兼容性指南

Web前端兼容性指南

Web前端兼容性问题一直是开发人员面临的最大挑战之一。本文将从浏览器兼容性、屏幕分辨率兼容性和跨平台兼容性三个方面，深入探讨Web前端兼容性问题的解决方案，并介绍各类兼容性框架的特点和使用场景。

一、Web前端兼容性问题

Web前端兼容性问题主要分为三类：浏览器兼容性问题、屏幕分辨率兼容性问题和跨平台兼容性问题。

1、浏览器兼容性问题

浏览器大战始于上个世纪90年代，微软发布的IE浏览器与网景公司的Netscape Navigator展开激烈竞争。1998年，网景公司被AOL收购。IE市场份额一度高达95%，但随后被Firefox、Chrome、Safari和Opera等浏览器蚕食。

IE6、7、8版本不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”。IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”。IE10和IE11部分支持Flex和WebGL，可被判定为“较易兼容”。

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

在不同的屏幕分辨率下，浏览器页面展示差异很大。主流桌面屏幕分辨率宽度集中在12801920，高度集中在7201080；主流平板屏幕分辨率宽度集中在9621280，高度集中在601800；主流移动屏幕分辨率宽度集中在360414，高度集中在640896。

3、跨平台兼容性问题

随着移动和平板市场的日益发展，Web在桌面、平板、移动平台上的兼容性问题日益突出。为了解决这个问题，诞生了跨平台框架，在不同平台上，外观、布局、操作都有差异化修改。

二、前端里程碑框架

在前端领域，随着技术的不断进步，逐步诞生了一些里程碑式的前端框架。这些前端框架，大致也是随着兼容性问题的发生、发展而诞生、发展的。这些框架代表了前端应用当时先进、成熟、主流的开发方式与发展方向，兼容性问题也在这些框架的基础之上不断得到解决，大致也分为三个阶段：

• 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网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。

（全文完）