Web前端兼容性问题的最大根源是什么？？

一、 Web前端兼容性问题

很长一段时间以来，Web前端领域中最大的问题是兼容性，而且没有人。

前端兼容性问题分为三类：

1、浏览器兼容性问题

第一次浏览器大战发生在1990年代。微软发布了Internet Explorer浏览器，并与Netscape的Netscape Navigator进行了对抗。 1998年，Netscape必须将公司出售给AOL。没有竞争对手，IE不会进取，并且W3C标准支持的开发速度很慢，这为将来的IE兼容性灾难奠定了基础。到2004年，IE的市场份额达到95％，但此后IE的份额逐渐被其他浏览器侵蚀，这些浏览器主要包括Firefox，Chrome，Safari和Opera。

2001年8月27日，Microsoft发布了IE6。 IE7于2006年发布仅五年。2009年3月19日，在许多beta版本之后，IE8终于发布了。进行了许多改进，但是就标准支持（例如HTML 5、 CSS 3）而言，它仍然落后于其他浏览器对手。这三个版本的IE是所有兼容性问题的最大根源，可以称为前端噩梦

IE 6、 7、 8不支持HTML 5、 CSS 3、 SVG标准，可以判断为“极难兼容”

IE9不支持Flex，Web Socket，WebGL，可以判断为“难于兼容”

IE10部分支持Flex（-ms-flexbox）和Web Socket，可以将其判断为“更容易兼容”

IE11部分支持Flex和WebGL，可以将其判断为“更容易兼容”

IE 6、 7、 8、 9可被视为“旧浏览器”

IE1 0、 11可被视为“准会

世界上最先进的响应式前端框架。

6、 Pure.css

一组小型响应式CSS模块

7、 YAMLCSS

YAML是一个模块化CSS框架，用于真正灵活，可访问且响应迅速的网站。

与IE6 +浏览器兼容（很少与IE6兼容）

五、跨平台框架

自2009年以来，由于Node.js生态系统的不断发展，前端开发飞速发展。许多前端MVC框架（例如AngularJS，BackboneJS和KnockoutJS）已经开始出现。最终，随着React，Angular，Vue等框架的出现，用前端框架开发移动和桌面应用程序的雄心开始猛增，并开始关注不同平台的差异化，并且越来越多的跨平台平台框架开始出现。

1、 Framework7

构建iOS，Android和桌面应用

从上图可以看出，桌面版比移动版更紧凑，控件风格类似于平台。支持三个主题：ios，md，aurora分别对应不同的平台。

2、离子

构建移动和桌面应用程序

从上图可以看出，它主要针对移动平台进行了优化，但是通过API支持多个平台。

3、温泉用户界面

开发HTML5混合和移动Web应用

从上图可以看出，它主要针对移动平台进行了优化，但是通过API支持多个平台。

4、类星体框架

基于Vue构建响应式网站，PWA，SSR，移动和桌面应用程序

Quasar将一些辅助CSS类附加到document.body：例如台式机，移动设备，触摸屏，平台[ios]，iframe内等。

5、 UNI-APP

使用Vue.js为所有前端应用程序开发框架

从上图可以看出，这三个平台相对一致，但是移动版本比台式版本更紧凑意味着什么？

6、水平对比度

框架

桌面优化

移动优化

移动相同

支持框架

Framework7

优秀

优秀

优秀

最多

离子

常规

优秀

常规

更多

温泉UI

常规

优秀

常规

更多

类星体

好

优秀

好

Vue

UNI-APP

常规

优秀

优秀

Vue

六、摘要

兼容性问题总是伴随着平台的扩展。 Web开发面临的最终问题是多平台兼容性。根据不同的产品和不同的阶段，需要权衡取舍，并采用不同的框架。需要支持的平台决定您的选择。

新框架或旧框架的新版本基本上不再支持IE，但中国有5. 65％的IE用户，有3. 29％的WinXP，4 6. 79％的Win7是潜在的IE用户，因此您可以将其视为平台。

注意：本讨论中不包括React Native代表的Native技术。

1、浏览器兼容性政策

仍然有3. 29％的家庭XP用户。 XP用户既不能升级到IE9，也不能安装Chrome和Firefox的新版本。 IE用户仍然有5. 65％。考虑到Windows用户为87％，IE9 +的份额应小于5. 65％-3. 29％* 87％= 2. 79％。换句话说，IE8之下的用户比IE8之上的用户更多。因此，仅支持IE9 +浏览器是没有意义的。它要么支持IE6，要么不支持IE。

看看知名网站与IE8的兼容性，

关于IE兼容性的建议：

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

二、如果必须兼容，后端将返回到IE专用页面，至少与IE8兼容。

2、屏幕分辨率兼容策略

屏幕分辨率应至少与屏幕和移动屏幕兼容。您可以参考的做法，将内容分为三类：移动主菜单和导航栏；主要内容扩展内容。屏幕分辨率高于480，显示主要内容和扩展内容。屏幕分辨率低于480，并显示移动终端的主菜单，导航栏和主要内容。

如果您的应用程序是管理软件，则最好考虑兼容的台式机屏幕，屏幕和移动屏幕。 Bootstrap 5已基于此考虑因素添加了超大屏幕。这时，您可以添加侧边栏以自动隐藏/打开，主要内容以Flex模式组织，并且可以在页面中并排显示多个页面（类似于Word的页面视图）。

3、跨平台兼容性策略

大型网站，移动网站和桌面网站是不同的入口，因此不存在兼容性，它们是两个独立的应用程序。对于低流量的网站，该平台的兼容性策略主要是应用响应框架以及移动主菜单和导航栏。其次，您可以选择跨平台框架以在不同平台上获得差异化的体验。没有这些框架，该网站的体验将不会大大降低。并且，如果您需要开发混合移动和桌面应用程序，则需要认真考虑这些框架。毕竟，用户对本地应用程序体验有更高的期望。

（全文结尾）

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-357779-1.html