web前端兼容性问题

一直以来，Web前端领域最大的问题就是兼容性问题

前端兼容性问题分三类：

浏览器兼容性
屏幕分辨率兼容性
跨平台兼容性

浏览器兼容性问题

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可视为“现代浏览器”

屏幕分辨率兼容性问题

在不同的屏幕分辨率，浏览器页面展示差异很大。特别是屏幕分辨率较小时，容易发生布局错乱。为了解决这个问题，响应式UI框架应运而生
现在新的UI框架基本都支持响应式
element ui ，ivew ，antd 等。。。。。

浏览器兼容策略

国内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兼容工作要求不高，基本正常即可，只是象征性的加了几条兼容性内容。
去哪儿网也会出现很多页面异常，但页面布局还是正常的，看来也是尽力而为，不做要求。
腾讯的页面只有一个立即更新按钮，一贯地友好。
知乎直接404，好吧，强大。

兼容IE的建议：

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

二、如果一定要兼容，后端返回IE专用页面，至少兼容IE8。

屏幕分辨率兼容策略

屏幕分辨率最少要考虑兼容便携屏幕和移动屏幕两种。可以参考去哪儿网的做法，把内容分成三类：移动端主菜单与导航栏；主要内容；扩展内容。屏幕分辨率高于480，显示主要内容、扩展内容。屏幕分辨率低于480，显示移动端主菜单与导航栏、主要内容。
如果你的应用是管理软件，则最好考虑兼容桌面屏幕、便携屏幕和移动屏幕三种。Bootstrap5新增了超超大屏幕，则就是基于这种考虑。这时候，可以加入侧边栏自动隐藏/打开，主要内容用Flex方式组织，可以在页面中并排显示多页（类似于Word的页面视图）。

跨平台兼容策略

大型网站，手机网站与桌面网站是不同的入口，因此不存在兼容，是两个单独的应用程序。对于流量较小的网站，平台的兼容策略主要是应用响应式框架，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！