全部兼容

 

一、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

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

各平台屏幕分辨率份额