前端兼容性探讨

Andrman 发布于2019-08-20 18:27 / 2641人阅读

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻

这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：

在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面的知识，不过主要处理的还是HTML、CSS、JavaScript。个人认为兼容性的问题也是对这三个方面进行处理。

首先，是html方面兼容性的处理，大家都知道，虽然有一个W3c标准的存在去规范html、xml/xhtml/css/javaScript/dom的标准，但是这只是个标准，真正体现出效果的是浏览器，而浏览器却有很多种，firefox/chrome/ie等等，每个浏览器又有不同的版本，不同浏览器不同版本因为浏览器本身渲染引擎的不同，在对于w3c标准的支持版本不同造就了一大堆的兼用性问题。对于html的兼容性问题，这里只讲两个处理方案：

1、使用样式重置css文件解决相同html标签在不同浏览器或者相同浏览器不同版本上渲染不同的兼容性问题。（个人推荐normalize.css）,当然这只供参考，样式重置要适应所在的项目风格，公司的开发规范要求等进行定制，所以要看具体要求，不过大致的重置样式都差不多，无非就是对padding,margin、字体属性等一些进行重置，具体大家可以去normalize.css查看里面的css样式。

2、在网页的顶部加上 doctype （文档类型）标签声明。这里涉及一个盒子模型的问题，大家知道，ie是特立独行的，在盒子模型上，ie的处理也不同，在ie中标签的width,height属性是包括padding和border的。当没有加上doctype时，每个浏览器都按照它自己的方式来渲染标签，这就会造成兼用性问题，而加上之后，浏览器会按照w3c标准盒子模型渲染标签。

再者是css兼用性问题，reset重置样式只解决了一些比较简单的样式问题，而类似于双边距、最小高度等问题，还需要开发者在各自的项目中进行对应的处理，这里还是总结的比较全面的，有兴趣朋友可以看一下（https://zhuanlan.zhihu.com/p/...）。

最后，就是JavaScript的兼容性问题，由于浏览器的发展及引擎不同，浏览器所自带的api也会不同，这就引起了JavaScript的兼用性问题，在引用对象属性或者方法时需要进行客户端检测，就是检测当前浏览器所处系统、所支持的语法、所具有的特殊性能。包括能力检测、怪癖检测和用户代理检测三种，个人比较推崇能力检测：

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。能力检测需要注意两点：

1、先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件；
2、必须测试实际要是用到的特性；

这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻~

GPU云服务器云服务器前端兼容性数据分析的探讨兼容性兼容性视图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84526.html

前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

MobService 2019-08-01 17:19 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

developerworks 2019-08-29 13:03 评论0 收藏0
前端_JavaScript

摘要：为此决定自研一个富文本编辑器。例如当要转化的对象有环存在时子节点属性赋值了父节点的引用，为了关于函数式编程的思考作者李英杰，美团金融前端团队成员。只有正确使用作用域，才能使用优秀的设计模式，帮助你规避副作用。 JavaScript 专题之惰性函数 JavaScript 专题系列第十五篇，讲解惰性函数需求我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意...

Benedict Evans 2019-08-26 11:39 评论0 收藏0
基本方法笔记 - 收藏集 - 掘金

摘要：探讨判断横竖屏的最佳实现前端掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优...

maochunguang 2019-08-20 17:44 评论0 收藏0