浏览器兼容问题在前面几期文章中提到过很多次了,它与网站跳出率和用户体验度息息相关。做好浏览器兼容,才能够让网站在不同的浏览器下正常显示。浏览器一旦不兼容,用户打开网站时就会出现排版错乱甚至是乱码的情况。
为什么会出现浏览器兼容的问题呢?不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。在web前端开发中如何避免浏览器兼容问题呢?
一 明确最低支持版本
在建站开始前,就必须明确下来网站最低支持的版本是什么,然后设计一个对应兼容方案,如果一些新的特效在一些版本落后的浏览器里不兼容时,也不必太过强求,只要保证主流的浏览器兼容性满足就ok了,我们只要坚持一个原则:网页显示工整规范,不影响正常操作就可以了。
浏览器版本提示
二 制定开发顺序和规划
当我们拿到设计的psd后,我们需要与设计进行充分的沟通,了解其对页面的交互效果和功能呈现的期望,然后对页面结构做好足够的分析。比如说,应该该使用什么样的样式,哪些功能块的样式是一样的,如何尽早将框架搭建起来,使用了哪些元素,这些元素又会不会出现浏览器兼容问题?做好开发前的规划,这样在后期开发时才能更加顺利。
三 标准化网页布局
规范、良好的书写代码习惯,尽量使用标准的网页布局方式,也就是符合W3C的布局,再加上成熟的前端开发框架和css、hack技巧的运用,这样完成一个页面下来,其实很少有地方需要你针对特定的浏览器进行兼容性修正。从Meetsite(见站)前端的经验来看:做过比较多的页面,有复杂也有简单的,大多时候,一个页面下来,其实只有两三个地方需要进行大的兼容性调整。
四 上线前做好测试
在网站上线前一定要做好兼容性的测试,测试的方法包括在线工具测试和实机测试,你可以通过测试工具进行测试比如:Superpreview/IETester/BrowserShots/Viewlike.Us!/Litmus等,或者是通过Mac上的虚拟机虚拟Windows进行测试,当然为了保险起见,最好还得进行实机测试。最好每做好一个样式,都要跑一遍所有要兼容的浏览器,针对每个浏览器进行调整,这样虽然开发过程时间会比较长,可是会比你开发完成后再来改效率高得多。
五 更多靠经验
多积累,多看看符合W3C标准规范的CSS手册和JS手册,注意积累,或者用一些开源框架,那样兼容性可以省下不少时间,要知道,解决浏览器的兼容性更多需要靠经验,经验让你对CSS的根源有更深的认识,所以你实现兼容性不是靠hack,而是靠各种属性原本的实现再进行互补。另外在平时的工作中,要不断的记录与总结浏览器BUG的处理方式,并思考其规律与特性,在下一次编写代码时,提前加上相应的兼容性BUG处理的代码。通过不断的经验积累,慢慢的会发现自己所写的代码可以正常的在各浏览器中展现。
今天给大家分享的也都是泛泛而谈,没有具体的解决方案,只是一些希望大家在开发网站时能够有意识的记住这些原则避免问题,让网站顺利上线。当然在网站上线后,前端开发人员也得注意好网站浏览器兼容的问题,比如说网站代码组件更新,浏览器升级等。