Web前端兼容性指南

1、Web前端兼容性问题

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

 

前端兼容性问题分三类：

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

 

一、浏览器兼容性问题

第一次浏览器大战发生在上个世纪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在多方面作了很大改进，但在HTML五、CSS 3等标准支持方面仍落后于其余浏览器对手。这三个版本的IE是全部兼容性问题的最大根源，堪称前端噩梦。

 

IE六、七、8不支持HTML五、CSS三、SVG标准，可被断定为“极难兼容”

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

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

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

 

IE六、七、八、9可视为“老式浏览器”

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

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

 

浏览器与Windows版本份额

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

http://gsa.statcounter.com/

 

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

全球桌面浏览器	份额	国内桌面浏览器	份额
Chrome	68.33%	Chrome	39.85%
Safari	9.40%	360 Safe	22.26%
Firefox	8.91%	Firefox	9.28%
Edge Legacy	4.41%	QQ Browser	6.50%
IE	3.00%	IE	5.65%
Opera	2.41%	Sogou Explorer	4.74%

 

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

全球Windows版本	份额	国内Windows版本	份额
Win10	72.90%	Win10：	47.14%
Win7	19.95%	Win7：	46.79%
Win8.1	4.70%	WinXP：	3.29%
Win8	1.09%	Win8.1：	1.67%
WinXP	0.87%	Win8：	0.61%
WinVista	0.44%	Win2003：	0.41%

 

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

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

 

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

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

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

 

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

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

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

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

 

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

分辨率	设备名	典型屏幕
>=1400px	xxl 超超大屏设备	桌面屏幕
>=1200px	xl 超大屏设备	便携屏幕
>=992px	lg 大屏设备	竖屏桌面屏幕、横屏平板屏幕
>=768px	md 中屏设备	竖屏平板屏幕
>=576px	sm 小屏设备	横屏移动屏幕
<576px	xs 超小屏（自动）设备	竖屏移动屏幕

注：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。

  

  

屏幕分辨率基础概念说明

缩写	全称	说明
PX	Device Pixels	设备像素，指设备的物理像素
PX	CSS Pixels	CSS像素，指CSS样式代码中使用的逻辑像素
DOT	Dot	点，屏幕或打印纸上的点，等同物理像素
PT	Point	点（传统长度单位）为1/72英寸=0.35mm
PT	iOS Point	点（iOS长度单位），为1/163英寸，等同于CSS逻辑像素
DP	Density independent Pixels	设备无关像素（Android长度单位），为1/160英寸，等同于CSS逻辑像素
SP	Scale independent Pixels	缩放无关像素（Android字体单位），等同于CSS逻辑像素，但文字尺寸可调（单独缩放）
DPR	Device Pixel Ratio	设备像素比，指CSS逻辑像素对于物理像素的倍数
DPPX	Dots Per Pixel	等同于DPR
PPI	Pixel Per Inch	屏幕上每英寸(2.54厘米)的像素点个数
DPI	Dots Per Inch	屏幕或纸上每英寸(2.54厘米)的点个数，标准密度：传统打印=72；Windows=96；Android=160；iOS=163。
DPIR	DPI Ratio	DPI缩放比例，指DPI对于Windows标准DPI的倍数=DPI/96，等同于DPR

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

 

各平台屏幕分辨率份额

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

全球桌面屏幕分辨率	份额	国内桌面屏幕分辨率	份额
1366x768	23.42	1920x1080	32.3
1920x1080	20.44	1366x768	12.61
1440x900	7.01	1440x900	8.3
1536x864	7	800x600	6.78
1600x900	4.63	1536x864	4.47
1280x720	4.05	1600x900	4
1280x800	3.41	1024x768	3.16
1280x1024	3.15	1280x720	3.12
1024x768	3	2560x1440	2.72
1680x1050	2.5	1680x1050	2.67
2560x1440	1.95	1280x800	1.9
1360x768	1.48	360x640	1.55
768x1024	1.26	360x780	1.45
1920x1200	1.08	1200x1366	1.31
360x640	0.89	1280x1024	1.26
800x600	0.83	1360x768	0.78
2048x1152	0.46	360x760	0.76
360x780	0.39	360x720	0.71
360x720	0.38	1920x1200	0.59
1093x615	0.36	2048x1152	0.53
Other	12.3	Other	9.06

 

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

全球移动屏幕分辨率	份额	国内移动屏幕分辨率	份额
360x640	23.52	360x640	31.22
375x667	7.74	360x780	9.39
360x720	4.98	1920x1080	9.07
360x760	4.55	360x760	6.18
414x896	4.32	360x720	5.96
414x736	3.98	375x667	5.64
375x812	3.95	414x736	4.91
360x780	3.88	375x812	2.41
412x846	3.86	414x896	2.09
360x740	3.21	393x851	1.63
412x732	2.19	360x748	1.58
320x568	1.91	800x600	1.42
720x1280	1.91	393x786	1.42
412x869	1.85	393x818	1
412x892	1.82	640x360	0.88
1080x1920	1.36	360x770	0.83
320x570	1.25	393x699	0.73
393x851	1.09	1080x1920	0.72
320x534	1.01	320x568	0.69
393x786	0.99	412x732	0.67
Other	20.62	Other	11.55

 

三、跨平台兼容性问题

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

 

各平台份额

statcounter全球/国内平台份额：

全球平台	份额	国内平台	份额
Mobile	50.34%	Mobile	60.76%
Desktop	46.67%	Desktop	38.01%
Tablet	2.99%	Tablet	1.23%

 

2、前端里程碑框架

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

 

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

1、DOM操做框架，表明框架：jQuery

2、响应式框架，表明框架：Bootstrap

3、前端MVC框架，表明框架：React、Angular、Vue

 

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

 

三、React

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

 

四、Angular

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

 

五、Vue

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

 

3、浏览器兼容框架

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

 

一、normalize.css

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

 

二、html5shiv.js

IE6~IE8识别HTML5标签，而且能够添加CSS样式。

 

三、respond.js

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

 

4、响应式框架

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

 

一、Semantic UI

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

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

 

二、Bulma

https://github.com/jgthms/bulma

基于 Flexbox 的现代 CSS 框架

 

三、Tailwind

https://github.com/tailwindcss/tailwindcss

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

 

四、Materialize

https://github.com/Dogfalo/materialize

A CSS Framework based on Material Design.

 

五、Foundation

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

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

 

六、Pure.css

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

A set of small, responsive CSS modules

 

七、YAMLCSS

https://github.com/yamlcss/yaml

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

 

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

 

5、跨平台框架

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

 

一、Framework7

https://github.com/framework7io/framework7

Build iOS, Android & Desktop apps

 

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

 

二、Ionic

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

build mobile and desktop apps

 

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

 

三、Onsen UI

https://github.com/OnsenUI/OnsenUI

develop HTML5 hybrid and mobile web apps

 

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

 

四、Quasar Framework

https://github.com/quasarframework/quasar

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

 

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

五、UNI-APP
 

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

使用 Vue.js 开发全部前端应用的框架

 

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

 

六、横向对比

框架	桌面优化	移动优化	移动一致	支持框架
Framework7	优秀	优秀	优秀	最多
Ionic	通常	优秀	通常	较多
Onsen UI	通常	优秀	通常	较多
Quasar	良好	优秀	良好	Vue
UNI-APP	通常	优秀	优秀	Vue

 

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技术不在本次讨论之列

 

一、浏览器兼容策略

国内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的建议：

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

2、若是必定要兼容，后端返回IE专用页面，至少兼容IE8。

 

二、屏幕分辨率兼容策略

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

 

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

 

三、跨平台兼容策略

大型网站，手机网站与桌面网站是不一样的入口，所以不存在兼容，是两个单独的应用程序。对于流量较小的网站，平台的兼容策略主要是应用响应式框架，加上移动端主菜单与导航栏便可，其次能够选用跨平台框架来实如今不一样平台的差别化体验。没有这些框架对于Web网站来讲不形成大的体验降低。而若是须要开发混合移动、桌面应用，则须要认真考虑这些框架，毕竟用户对本地应用的体验期待要高不少。

 

 （全文完）