浅谈pc端以及移动端的兼容测试

lsekfe

对于经常做网页设计的人员来说，网页的兼容性测试是不可缺少的，记得刚来单位的新手，都是要安装一款浏览器测试软件的，看自己制作的网页是否在各大浏览器中正常显示，有没有变形，或者网页效果不兼容等。
　　不仅仅是新手学习的过程中会遇到，即使是资深的前端程序员，网站样式的兼容性往往很让人头疼，虽然W3C提出了一套标准，但是浏览器厂商往往不会完全按照标准来，这当中以微软为最奇葩的代表，每代IE都各有特点，问题也不仅仅存在于IE身上，其他浏览器也很难说自己就没有问题。所以在设计网站时一定要注意浏览器兼容性。
　　第一：作为网站前端设计人员遇到任何问题一定是先找出原因
　　其实，浏览器兼容性问题主要来自于两个方面：css样式兼容性和javascript脚本兼容性，虽然兼容性问题出现在这两方面，但是这里面的问题之多，不是几百个字的文章能说得完的，今天笔者也只能简单的说一些原则性的注意点，可以帮助改善浏览器兼容性问题。
　　1、css兼容性问题：浏览器的数量太多，我们只能针对内核来进行划分，这样主流的浏览器主要是三个内核：微软的trident内核、FF的mozilla内核、chrome为代表的webkit内核。其中微软又有问题就是IE6、7、8等等虽然是一个系列的内核，但对css的解释又存在不同。总体来说做浏览器兼容性测试只要测试通过了上述浏览器，一般问题就不大了。在css兼容性问题有一种是所谓先天缺陷，就是某些标签、样式本身就存在不兼容，例如我们再写DIV透明的时候，那么IE6解析与其他浏览器本身确实就不相同;或者是PNG图片在IE不兼容，那么这种问题应该说是“真正的不兼容”。同时要注意如果不是必要，不要采用自动高宽方式，尽量限制好页面内元素的高宽，这样可以最大限度的处理好css样式兼容性问题。
　　2、javascript兼容性问题：这个也是个非常麻烦的问题来源，主要的问题依然来自于IE浏览器系列和其他浏览器的差别：IE调用的是系统组件，而其他浏览器调用的自己内建的组件，这就造成了你必须针对不同的浏览器调用不同的组件，最典型的方面莫过于ajax。但其他浏览器之间的问题也一样不少，我见过的问题就有：RGB值的表示方式的不同，offsetleft取出的值不同，还有前篇文章提到的readystate的解释不同等问题。javascript的问题有相当一部分可以靠一些脚本插件如jquery来改善，但要想做完善，需要针对不同浏览器进行详细的测试。
　　第二：浏览器兼容性测试工具要齐全有一个好的工具能帮助你省不少的事!
　　一般来说我用的是IETest和IECollection这两个工具。IETester可以帮我们模拟页面在IE5.5、IE6、IE7与IE8beta1等浏览器的相容性，验证CSS样式或网站版面是否可以在各个主要浏览器正常显示。IETester以“分页标签”的方式分别在不同的页签中显示，软件采用了类似于Office2007的界面呈现方式，使用起来非常方便。
　　除了IETester，另外还有IEColection也可以解决多IE版本共存问题。IECollection包含了IE1.0、1.5、3.0、5.5、6.0、7.0、8.0等版本的网络浏览器。通过IECollection，设计师可以在不同的IE里面测试版面样式与功能。此外，IECollection还提供了InternetExploreDeveloperToolbar工具，通过这些工具检查网页内容的样式、版面错乱或程序错误等。

　　网页设计界有这样一句话，只要网页在火狐浏览器中兼容性没有问题，哪么在其他浏览器中出现兼容性的问题可能性就很小，这要得易于火狐浏览器对于网页代码的严格规范有关了，火狐浏览器对网页代码的严谨程度使得得许多网页设计者都喜欢使用火狐来进行排版与测试，不得不说火狐是一个好的网页测试工具，如下图所示：

　　移动网页兼容性测试主要测试不同移动设备显示上网站的显示效果。由于用户移动设备或者浏览器往往不同，若不进行测试，会出现样式错乱或者图片无法显示等问题。对于前端开发工程师来说，确保代码在各种主流设备和浏览器的各个版本中都能正常显示,因此要对编写出来的网页进行兼容性测试。

　　最后，要告诉大家我们在做网站的时候就要考虑到用户的浏览习惯，以大多数用户的浏览习惯为主，调整网站的兼容性。大家也知道，现在的浏览器各式各样，每个人的浏览习惯也各不一样，做为网站的前端设计师就要考虑到这一点。网站在设计开发的时候要注意调好兼容性，对网站进行多个主流浏览器的兼容性调试，能够有效的保证您的网站在多个浏览器下正常的浏览。

oliver.tang

学习