关于网页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 ...
随机推荐
- Git学习(一)——Git介绍与安装
一.Git诞生 Linus在1991年创建了Linux,从此,Linux系统不断发展,成为最大的服务器系统软件. 2005年,Linus用C编写了一个分布式版本控制工具--Git. 二.集中式vs分布 ...
- 更快学习 JavaScript 的 6 个思维技巧
更快学习 JavaScript 的 6 个思维技巧 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...
- 4.代码同时托管到github和git.oschina.net
我的开源项目托管在Github,同时在Git@OSC也有备份,有两个地方,是不是很麻烦呢?非也非也,下面介绍一下我是怎么做的. 1.先在Github新建一个项目,点击Github主页右上角的加号 -& ...
- LSD-SLAM深入学习(3)-代码解析
前言 在LSD-SLAM深入学习(2)中我们已经对算法进行分析,此处假设读者对于ros的基本操作都已经很熟悉,而且已经编写了一定量的的代码,我们直接上干货.此处分析的程序如下 main_live_od ...
- FluentValidation验证
参考:http://www.c-sharpcorner.com/UploadFile/3d39b4/Asp-Net-mvc-validation-using-fluent-validation/ 创建 ...
- 在Abp中集成Swagger UI功能
在Abp中集成Swagger UI功能 1.安装Swashbuckle.Core包 通过NuGet将Swashbuckle.Core包安装到WebApi项目(或Web项目)中. 2.为WebApi方法 ...
- DSP(2) -- 离散时间信号的序列运算
1.信号相加:这是一种对应的样本与样本之间的相加. 在Matlab中它可用算术运算符“+”实现,然后x1和x2的长度必须相等.如果序列不等,或者长度虽然相等但采样的位置不同,就不能用运算符“+”了.我 ...
- datagridview 定位到最后一行,定位不准的原因
C# 写的 winform 程序,定位到最后一行 dgvGoods.FirstDisplayedScrollingRowIndex = dgvGoods.Rows.Count - 1; 测试中发现,一 ...
- OD使用教程8
方式一基本的打补丁方式: 打开程序之后首先会跳出一个nag窗口,从中我们知道了可以将nag窗口作为切入点,只要找到了nag的触发点就等同于找到注册与未注册的判断的点 右键-查找-所有参考文本字串 ...
- using 语句中使用的类型必须可隐式转换为“System.IDisposable
在使用 EF 出现 using 语句中使用的类型必须可隐式转换为“System.IDisposable 今天写在这里分享给大家 出现这样的问题,是因为没有引用 EntityFramework 这个程 ...