一、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月为基准。
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 |
注:各厂商概念有重名现象,请注意区分。
各平台屏幕分辨率份额