一、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全球/国内桌面浏览器份额：

全球桌面浏览器

份额

国内桌面浏览器

份额

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%

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

在不同的屏幕分辨率，浏览器页面展示差异很大。特别是屏幕分辨率较小时，容易发生布局错乱。为了解决这个问题，响应式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

statcounter全球/国内平板屏幕分辨率份额：

全球平板屏幕分辨率

份额

国内平板屏幕分辨率

份额

768x1024

56.42

768x1024

72.49

1280x800

5.97

600x960

3.56

800x1280

4.23

834x1112

2.7

601x962

3.74

1024x1366

1.54

1024x1366

3.16

800x1280

1.41

834x1112

3.1

1024x768

1.37

600x1024

2.74

375x667

1.13

962x601

2.34

1920x1080

1.04

1024x768

2.11

834x1194

0.93

1024x600

1.45

1280x720

0.9

834x1194

0.97

360x640

0.86

960x600

0.75

1280x800

0.53

600x960

0.75

800x1232

0.42

1280x720

0.75

601x962

0.35

534x854

0.61

610x976

0.33

810x1080

0.38

810x1080

0.32

854x534

0.35

1280x752

0.28

1920x1080

0.32

320x480

0.27

686x1098

0.26

960x600

0.24

1280x752

0.26

768x976

0.19

Other

9.36

Other

9.15

3、跨平台兼容性问题

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

各平台份额

statcounter全球/国内平台份额：

全球平台

份额

国内平台

份额

Mobile

50.34%

Mobile

60.76%

Desktop

46.67%

Desktop

38.01%

Tablet

2.99%

Tablet

1.23%

二、前端里程碑框架

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

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

一、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 开发所有前端应用的框架

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

横向对比

框架

桌面优化

移动优化

移动一致

支持框架

Framework7

优秀

优秀

优秀

最多

Ionic

一般

优秀

一般

较多

Onsen UI

一般

优秀

一般

较多

Quasar

良好

优秀

良好

Vue

UNI-APP

一般

优秀

优秀

Vue

总结

兼容性问题总是伴随着平台的扩张而产生的，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的建议：

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

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

屏幕分辨率兼容策略

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

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

跨平台兼容策略

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

（全文完）

Web前端兼容性指南的更多相关文章

  1. web前端 兼容性问题

    1:position属性使用过多或使用位置不恰当引起滚动时页面错乱 浏览器环境:ie7 position:relative; 网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出 ...

  2. web前端兼容性问题总结

    1.   HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者document.get ...

  3. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  4. 《Web 前端面试指南》2、JavaScript 的 Bind 函数进阶

    使用 Bind() 设置方法中 this 对象 //<button>获取随机的人</button>​ //<input type="text"> ...

  5. web前端兼容性整理+完善

    [技巧类] 1.对一些标签统一规范. 2.padding,marign,height,width 写好标准头 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1 ...

  6. web前端兼容性问题

    传送门:https://www.cnblogs.com/zhoudawei/p/7497544.html

  7. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  8. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  9. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

随机推荐

  1. Ant 的最完整build.xml(转)

    Ant的概念 Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷.最初Ant开发者在开发跨平 ...

  2. 此flash player与您的地区不相容——更换新版本edge后出现的问题

    最新切换到了edge浏览器,使用flash时提示:"此flash player与您的地区不相容",而chrome是没有问题的.网上找到解决方案,发现一个可以有效解决的方式,如下: ...

  3. 关于使用npm成功安装命令后,执行时却报找不到命令的问题

    # 使用npm安装newman命令 ~$ npm install newman --global ... /root/node-v6.9.1-linux-x64/bin/newman -> /r ...

  4. 第四篇-用Flutter手撸一个抖音国内版，看看有多炫

    前言 这次对布局进行优化,主要包含了首页tabview pageview 以及添加几个按钮的操作过程.主要使用到stack层叠布局,tabpview和pageview,tabview两个页面,一个关注 ...

  5. 项目打包成手机app 通过什么打包？

    项目打包成手机app  通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文 ...

  6. Chisel3 - util - MixedVec

    https://mp.weixin.qq.com/s/mO648yx4_ZRedXSWX4Gj2g   可以容纳不同类型的变量的向量.   参考链接: https://github.com/freec ...

  7. 我眼中的华为公有云AI平台--ModelArts

    前言 AWS Sagemaker has been a great deal for most data scientists who would want to accomplish a truly ...

  8. Java实现 LeetCode 1111 有效括号的嵌套深度（阅读理解题，位运算）

    1111. 有效括号的嵌套深度 有效括号字符串 定义:对于每个左括号,都能找到与之对应的右括号,反之亦然.详情参见题末「有效括号字符串」部分. 嵌套深度 depth 定义:即有效括号字符串嵌套的层数, ...

  9. Java实现 LeetCode 447 回旋镖的数量

    447. 回旋镖的数量 给定平面上 n 对不同的点,"回旋镖" 是由点表示的元组 (i, j, k) ,其中 i 和 j 之间的距离和 i 和 k 之间的距离相等(需要考虑元组的顺 ...

  10. java实现 洛谷 P1464 Function

    import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.S ...