一直以来,Web前端领域最大的问题就是兼容性问题,没有之一。css
前端兼容性问题分三类:html
第一次浏览器大战发生在上个世纪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是全部兼容性问题的最大根源,堪称前端噩梦。html5
IE六、七、8不支持HTML五、CSS三、SVG标准,可被断定为“极难兼容”ios
IE9不支持Flex、Web Socket、WebGL,可被断定为“较难兼容”git
IE10部分支持Flex(-ms-flexbox)、Web Socket,可被断定为“较易兼容”github
IE11部分支持Flex、WebGL,可被断定为“较易兼容”web
IE六、七、八、9可视为“老式浏览器”后端
IE十、11可视为“准现代浏览器”浏览器
Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”
Statcounter的各项数据以2020年6月为基准。
二、屏幕分辨率兼容性问题
在不一样的屏幕分辨率,浏览器页面展现差别很大。特别是屏幕分辨率较小时,容易发生布局错乱。为了解决这个问题,响应式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 |
注:各厂商概念有重名现象,请注意区分。
三、跨平台兼容性问题
随着移动和平板市场的日益发展,Web在桌面、平板、移动平台上的兼容性问题日益突出。因为移动和平板是触摸式操做,与桌面的鼠标操做方式有很大差别,所以在不一样平台上要作相应修改。为了解决这个问题,诞生了跨平台框架,在不一样平台上,外观、布局、操做都有差别化修改。
在前端领域,随着技术的不断进步,逐步诞生了一些里程碑式的前端框架。这些前端框架,大体也是随着兼容性问题的发生、发展而诞生、发展的。
这些框架表明了前端应用当时先进、成熟、主流的开发方式与发展方向,兼容性问题也在这些框架的基础之上不断获得解决,大体也分为三个阶段:
1、DOM操做框架,表明框架:jQuery
2、响应式框架,表明框架:Bootstrap
3、前端MVC框架,表明框架:React、Angular、Vue
2006年1月John Resig等人建立了jQuery;8月,jQuery的第一个稳定版本。jQuery是DOM操做时代前端框架最优秀,也几乎是惟一表明;可是在以React为表明的新式前端框架崛起以后,迅速没落。
Bootstrap原名Twitter Blueprint,由Mark Otto和Jacob Thornton开发,最经典的响应式CSS框架,在2011年8月19日做为开源项目发布。其核心是16列布局栅格系统,使用媒体查询设定阈值为超小屏幕,小屏幕,中等屏幕,大屏幕,超大屏幕建立不一样的样式。
React 起源于 Facebook 的内部项目,在前端MVC框架大潮中诞生并走红。2013年5月开源,凭借Virtual Dom,JSX,Flux,Native等一大批创新特性,迅速吸引了大量开发人员,至今还是最早进的前端JS框架。
AngularJS 诞生于2009年,由Misko Hevery 等人建立,后为Google所收购。因为Google不差钱,因此AngularJS经历颠覆性升级为Angular。Angular最大的特色就是大而全。
2013年,在Google工做的尤雨溪,受到Angular的启发,从中提取本身所喜欢的部分,开发出了一款轻量框架,最初命名为Seed,后改名为Vue。
在前端发展的初期,大多数开发最关注的问题就是浏览器兼容问题,迫切须要兼容全部浏览器的JS和CSS框架。这阶段除了横空出世的jQuery,还有一些其它方面的兼容框架。
让不一样的浏览器在渲染网页元素的时候形式更统一。
IE6~IE8识别HTML5标签,而且能够添加CSS样式。
使IE6~IE8浏览器支持媒体查询。
有了jQuery等兼容框架的基础,开发人员的关注点,逐渐转移到愈来愈丰富的屏幕分辨率上,除开Bootstrap一家独大,愈来愈多的响应式框架也在奋起直追。
https://github.com/semantic-org/semantic-ui
Semantic 是一个设计漂亮的响应式布局的语义化框架。
https://github.com/jgthms/bulma
基于 Flexbox 的现代 CSS 框架
https://github.com/tailwindcss/tailwindcss
Tailwind是一个底层CSS 框架,快速 UI 开发的实用工具集,提供了高度可组合的应用程序类,可帮助开发者轻松构建复杂的用户界面。另外Tailwind + Styled Component 简直是绝配(摘自知乎https://www.zhihu.com/question/337939566)。
https://github.com/Dogfalo/materialize
A CSS Framework based on Material Design.
https://github.com/foundation/foundation-sites
The most advanced responsive front-end framework in the world.
https://github.com/pure-css/pure
A set of small, responsive CSS modules
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等框架的脱颖而出,用前端框架开发移动、桌面应用的野心开始暴涨,开始关注不一样平台的差别化,愈来愈多的跨平台框架开始出现。
https://github.com/framework7io/framework7
Build iOS, Android & Desktop apps
从上图能够看出,桌面版本比移动版本更紧凑,控件风格跟所在平台近似。支持三种主题:ios、 md、 aurora对应不一样平台。
https://github.com/ionic-team/ionic
build mobile and desktop apps
从上图能够看出,主要针对移动平台优化,但经过API支持多种平台。
https://github.com/OnsenUI/OnsenUI
develop HTML5 hybrid and mobile web apps
从上图能够看出,主要针对移动平台优化,但经过API支持多种平台。
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 |
兼容性问题老是伴随着平台的扩张而产生的,Web开发面临的终极问题就是多平台兼容性问题,根据不一样产品,不一样阶段作部分取舍,应用不一样的框架而已。须要支持的平台,决定了你的选择。
新的框架或旧框架的新版本基本都再也不支持IE,但国内还有5.65% 的IE用户,并且3.29%的WinXP,46.79%的Win7都是潜在的IE用户,因此可将其作为一个平台看待。
注: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的建议:
1、建议不作任何兼容,IE6~11直接显示升级浏览器按钮。
2、若是必定要兼容,后端返回IE专用页面,至少兼容IE8。
屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。能够参考去哪儿网的作法,把内容分红三类:移动端主菜单与导航栏;主要内容;扩展内容。屏幕分辨率高于480,显示主要内容、扩展内容。屏幕分辨率低于480,显示移动端主菜单与导航栏、主要内容。
若是你的应用是管理软件,则最好考虑兼容桌面屏幕、便携屏幕和移动屏幕三种。Bootstrap5新增了超超大屏幕,则就是基于这种考虑。这时候,能够加入侧边栏自动隐藏/打开,主要内容用Flex方式组织,能够在页面中并排显示多页(相似于Word的页面视图)。
大型网站,手机网站与桌面网站是不一样的入口,所以不存在兼容,是两个单独的应用程序。对于流量较小的网站,平台的兼容策略主要是应用响应式框架,加上移动端主菜单与导航栏便可,其次能够选用跨平台框架来实如今不一样平台的差别化体验。没有这些框架对于Web网站来讲不形成大的体验降低。而若是须要开发混合移动、桌面应用,则须要认真考虑这些框架,毕竟用户对本地应用的体验期待要高不少。
(全文完)