关于网页pc端以及移动端的兼容性——测试
对于经常做网页设计的人员来说,网页的兼容性测试是不可缺少的,记得刚来单位的新手,都是要安装一款浏览器测试软件的,看自己制作的网页是否在各大浏览器中正常显示,有没有变形,或者网页效果不兼容等。
不仅仅是新手学习的过程中会遇到,即使是资深的前端程序员,网站样式的兼容性往往很让人头疼,虽然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端以及移动端的兼容性——测试的更多相关文章
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢?
如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...
- 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块
本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...
- 如何解决PC端和移动端自适应问题?
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- asp.net Core 使用过滤器判断请求客户端是否为移动端,并实现PC端和移动端请求映射和自动跳转
很多时候我们做网站时单纯的用bootstrap等前端框架实现的前端自适应带给用户的体验并不太好,所以为了提高用户体验会专门针对PC端网页重新设计一套移动端网页,但是怎么才能做到在移动端访问PC页面的时 ...
- js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
随机推荐
- Codeforces Round #384 (Div. 2) //复习状压... 罚时爆炸 BOOM _DONE
不想欠题了..... 多打打CF才知道自己智商不足啊... A. Vladik and flights 给你一个01串 相同之间随便飞 没有费用 不同的飞需要费用为 abs i-j 真是题意杀啊, ...
- notepad++ 离线插件下载
http://www.cnblogs.com/findumars/p/5180562.html
- Android开发工具全面转向Android Studio(2)——AS project/module的CRUD
本文有些地方可能需要衔接Android开发工具全面转向Android Studio(1)——准备开发环境,读起来效果会更好. 这个世界很奇妙,所有的东西离不开CRUD,即增删改查.即使人本身也遵循这个 ...
- HTTP Client工具类
HTTP Client工具类: import org.apache.http.Header;import org.apache.http.HttpEntity;import org.apache.ht ...
- UNIX 系统调用函数errno返回值搜集(in updating )
当Unix系统级函数遇到错误时,它们会典型地返回-1,并设置全局整数变量errno来表示什么出错了 阅读redis源码的时候,发现如果对系统级函数出错时的errno比较熟悉,写起程序来会游刃有余不少. ...
- Java 验证码、二维码
Java 验证码.二维码 资源 需要: jelly-core-1.7.0.GA.jar网站: http://lychie.github.io/products.html将下载下来的 jelly ...
- intel显卡笔记本恢复屏幕亮度调整功能
更新Intel显卡驱动后不能修改屏幕亮度,可以在注册表里面搜索featuretestcontrol,将f000修改为ffff,重启后就可以通过Fn+F4/F5调整屏幕亮度了. 注:此方法适用于带有in ...
- win10U盘 安装
转载自网络: 首先,现在WIN10镜像文件 1.地址和具体信息如下: 下载提示:请用迅雷等支持P2P的下载工具下载 Win10 TH2正式版微软官方原版ISO系统镜像下载(2016年4月更新版): W ...
- mvc理解篇
java是面向对象的语言. mvc是一种设计模式,就像论文排版,设置好论文的框架,字体,大小,颜色等,然后把论文内容往里填.mvc的出现让代码的层次更加的清晰,业务通过数据流实现. mvc框架的优点如 ...
- iOS常用公共方法
iOS常用公共方法 字数2917 阅读3070 评论45 喜欢236 1. 获取磁盘总空间大小 //磁盘总空间 + (CGFloat)diskOfAllSizeMBytes{ CGFloat si ...