对于经常做网页设计的人员来说,网页的兼容性测试是不可缺少的,记得刚来单位的新手,都是要安装一款浏览器测试软件的,看自己制作的网页是否在各大浏览器中正常显示,有没有变形,或者网页效果不兼容等。

不仅仅是新手学习的过程中会遇到,即使是资深的前端程序员,网站样式的兼容性往往很让人头疼,虽然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和IE Collection这两个工具。IETester可以帮我们模拟页面在IE5.5、IE6、IE7与 IE8 beta1等浏览器的相容性,验证CSS样式或网站版面是否可以在各个主要浏览器正常显示。IETester以“分页标签”的方式分别在不同的页签中显示,软件采用了类似于Office2007的界面呈现方式,使用起来非常方便。

  除了IETester,另外还有IE Colection也可以解决多IE版本共存问题。 IE Collection包含了IE1.0、1.5、3.0、5.5、6.0、7.0、8.0等版本的网络浏览器。通过IE Collection,设计师可以在不同的IE里面测试版面样式与功能。此外,IE Collection还提供了Internet Explore Developer Toolbar工具,通过这些工具检查网页内容的样式、版面错乱或程序错误等。

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

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

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

关于网页pc端以及移动端的兼容性——测试的更多相关文章

  1. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  2. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端

    背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...

  3. 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢?

    如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...

  4. 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  5. 如何解决PC端和移动端自适应问题?

    做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...

  6. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  7. PC端、移动端的页面适配及兼容处理

    转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...

  8. asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转

    很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...

  9. js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...

随机推荐

  1. 统计黑ip的脚本

    #!/bin/bash > ] do cd /var/openresty/nginx/logs#统计nginx日志,将结果重定向到文件blackip.txt中 cat access.log|gr ...

  2. Activity之间传递参数(四)

    --------siwuxie095 获取Activity的返回参数 1.首先修改两个布局文件,都修改为 LinearLayout 布局, 添加orientation属性为:vertical. (1) ...

  3. 根据UIColor对象,获取对应的RGBA值

    - (NSArray *)getRGBWithColor:(UIColor *)color { CGFloat red = 0.0; CGFloat green = 0.0; CGFloat blue ...

  4. hdu 1069 (DP) Monkey and Banana

    题目:这里 题意: Description 一组研究人员正在设计一项实验,以测试猴子的智商.他们将挂香蕉在建筑物的屋顶,同时,提供一些砖块给这些猴子.如果猴子足够聪明,它应当能够通过合理的放置一些砖块 ...

  5. 64位windows 7下成功配置TortoiseGit使用Github服务器

    最近感觉自己电脑上的代码太乱了,东一块.西一块……于是决定使用正规的源代码管理软件来管理自己以后写的代码.以前做小项目的时候用过TortoiseSVN,感觉不错,但是速度上有点慢,于是决定尝试一下新东 ...

  6. Android开发工具全面转向Android Studio(3)——AS project/module的目录结构(与Eclipse对比)

    如果AS完全还没摸懂的,建议先看下Android开发工具全面转向Android Studio(2)——AS project/module的CRUD. 注:以下以Windows平台为标准,AS以目前最新 ...

  7. double四舍五入,double四舍五入并转成string

    import java.math.BigDecimal; /** * 处理一些数据类型的方法的java类 * @author ljb * */public class NumberTools { /* ...

  8. 使用AsyncTask实现文件下载并且在状态中显示下载进度

    2013年10月24日 上班的第二天 昨天我是用afinal完成的则个功能,但是公司里并不希望使用第三方的代码,所以要求我在不使用第三方开源项目的情况下实现. 最先我是使用Thread开启一个子线程, ...

  9. js处理匿名函数

    首先js 有DOM0 和DOM2级事件 DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序 一个元素可以绑定多个事件 DOM0: <div i ...

  10. yaf框架学习笔记

    1.yaf框架支持简单的试图引擎,并且支持用户自定义视图引擎,比如smarty. 2.Yaf_Request_Http::getQuery  ,Yaf_Request_Http::getQuery ( ...