一直以来，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在多方面做了很大改进，但在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
注：各厂商概念有重名现象，请注意区分。
各平台屏幕分辨率份额
