手机网站开发必修课[2]：浏览器兼容性测试

fool2fish 发表于 2009.08.24

1 为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器

对于web网站，一般来说，目前我们需要兼容的是

1个操作系统（windows）X 3种浏览器（ie 6、ie7、firefox）= 3种情况

要求高一点的web网站需要兼容的是

1个操作系统（windows）X 7种浏览器（ie6、ie7、firefox、chorme、opera、safari、遨游）+ 1个操作系统（mac） X 1种浏览器（safari）= 8种情况

注：以上浏览器除了ie外，均指其最新版本。另，遨游浏览器虽然是基于ie内核，但某些表现却完全出人意料，故也加入考虑。

好了，以上最多8种需要兼容的情况，已经让人大呼头痛不已，何况事实上这些浏览器对html代码本身的解析都是没问题的，你比较需要费心的只是ie6的css和js。

那么手机浏览器有多少种需要兼容的情况呢？

从上一篇文章看来，如果要做到比较好的兼容性，我们要兼容的手机浏览器至少有二十种情况（手机自带的浏览器+用户可安装的浏览器）

web浏览器的兼容性大致可根据浏览器的渲染引擎来确定兼容类型，但手机浏览器，即使是使用的同一个渲染引擎，在不同的手机上表现也可能很不一样。

还有两个更令人头痛的问题：

你没法使用css hack
你也没法逐一去测试各浏览器的实际效果

所以，当你涉足手机网站开发的时候，你才会感概，web浏览器们真是太仁慈了。

不过事情还不算太坏，就目前来看，基于手机浏览器的限制，一般手机网站的布局和功能不会太复杂，而高级一些的手机浏览器（如iphone等）兼容性还是很理想的，不用操心。

不管怎样，对于一个专业的手机网站来说，有一份专业的浏览器兼容性测试报告是非常有必要的。面对成百上千的手机型号，还有日益强大的山寨机，我们的兼容性测试要覆盖哪些机型呢？

2 目标用户数据挖掘

我们基本不可能兼顾到所有类型的手机浏览器，所以你必须要根据你的用户数据来决定要测试兼容性的手机型号。

你的手上需要有以下数据：

你的网站访问的手机型号统计
用户访问你的网站的主要行为

如果拿不到这些数据，那么接下来的兼容性测试将会艰难很多，你不得不通过广撒网的方式，测试尽可能多的手机（而不是主要目标客户群的手机）来确认某些属性的兼容性，这可不是一个好主意，相信让你的老板掏银子给你采购几十乃至上百台手机不太现实。

总的来说，你需要得到测试手机的以下数据：

手机型号、操作系统、浏览器类型、屏幕尺寸、颜色深度

3 安排测试，整理测试结果

当我们设计测试点的时候，应该涵盖哪些内容呢？

对xhtml代码本身的支持度，如是否支持<input type=”image” />
对特殊字符的支持度，如★◆
对css的支持度
- 对css不同引入方式的支持
- 对css的属性的支持
- 对css某属性不同属性值的支持，如margin的取负值、background-repeat的不同取值
- 对css选择器的支持，如tag，class，id，选择器的嵌套
- 对css高级选择器的支持
对js的支持度
- 目前还不太可能在手机上创建很复杂的js效果，可以仅测试js的基本功能，比如对事件的支持，当然，使用js最重要的是要考虑好如何优雅降级，确保用户在没有js的情况下也能顺利完成任务
对图片的支持度
- 支持图片类型，包括gif非透明背景、gif透明背景、gif动画图、jpg、png8非透明背景、png8透明背景、png24非透明背景和png24透明背景
- 支持图片颜色，如色彩复杂的图片，光滑渐变的图片

设计一个专用于测试的excel表格，方便测试人员填写测试结果也是非常重要的工作，如果这一步没有做好，也许你之前所有的努力都将白费。传承有价值的研究结果，其意义不低于研究本身。

由于之前所进行的手机兼容性研究工作都属于公司商业机密，具体测试表格无法公示，有兴趣的同学可以单独交谈。

标签：mini browser, mobile browser compatibility, wap browser, 兼容性, 手机浏览型, 手机网站开发

分类：前端开发 | 26条评论 »

« 挨踢民工的同居生活[体检记(三)]

“支付宝卡通”宣传思路一二 »

评论恒久远，一篇永流传

26 条评论

winter said: 2009-08-25 12:16

Hi, 我是做WinCE浏览器的，能跟你聊聊么？

回复
songqi said: 2009-08-25 12:41

太强了太强了！！热泪盈眶的拜读完，现在已经泪流满面。。激动的心情久久不能平复，五体投地的拜倒在楼主至今买不起的石榴裙下

回复
jingangel said: 2009-09-17 06:36

很全面,期待3

回复
tenly said: 2009-10-07 18:00

完全能理解楼主的痛苦。文章写得很好！

回复
吴鹏(AlphaWu) said: 2009-10-17 03:38

浏览器没有标准，确实让人很头疼。

回复
xifs said: 2009-10-18 07:34

本来这方面就很头疼了，
现在看了文章分析，简直就内牛面满

回复
fool2fish said: 2009-10-21 09:00

我很想知道大家是怎么注册留言的，好似我自己这里页面打开管理面板已经出不来了，囧

回复
winter said: 2009-10-29 03:26

匿名直接填写

回复
HUANGTAOER said: 2009-11-09 03:42

很希望与楼主交流邮箱就是我的MSN~

回复
手机网站开发必修课 | 紫枫印象 said: 2010-01-04 04:48

[...] 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）； [...]
紫枫印象 said: 2010-01-04 05:01

最近对手机网站的开发有些动作，于是乎跑到这里来了，博主写的不错，学习了，希望可以和博主交流一下！谢谢！

回复
紫枫印象 said: 2010-01-04 05:02

转载先！

回复
沙漠 said: 2010-01-04 05:04

谢谢分享！

回复
江南 said: 2010-01-07 08:45

请关注一下分辨率现在手机同样大小屏幕的手机分辨率不一样显示效果完全不一样

回复
billinn said: 2010-01-11 07:03

hello! 谢谢分享！

回复
浅议手机上网与web开发 | Focusec said: 2010-03-05 07:01

[...] 现在手机浏览器对很多标准支持都不够（可以看一下挨踢农民工的文章），手机浏览器的显示次序也是从上到下，从左到右，所以说在web设计中把内容放在左边，把边栏放在右边应该是最佳的布局方式。 [...]
手机网站开发必修课[2009总结版] « 学习.记录 said: 2010-03-07 12:32

[...] 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）； [...]
it Flies Like Mario – 像Mario一样飞 » 我的Mobile WEB研发流程 said: 2010-03-12 17:00

[...] PS:关于兼容性测试，你也可以参考沉鱼的这篇文章。 [...]
手机网站开发必修课[2009总结版] | 学习.记录 said: 2010-03-13 17:14

[...] 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）； [...]
手机网站开发必修课[2]：浏览器兼容性测试 « 蘇恩兒的部落格 said: 2010-03-18 04:25

[...] 转自http://www.fool2fish.cn/?p=320 [...]
手机网站开发笔记 1 - 我们的故事 | i Hand u - dUcky's Blog said: 2010-04-07 03:06

[...] 手机网站开发必修课[2]：浏览器兼容性测试 [...]
手机网站开发笔记 « 焦点科技 TCD Blog said: 2010-04-07 03:15

[...] 手机网站开发必修课[2]：浏览器兼容性测试 [...]
手机网站开发必修课[2009总结版] | 3RD said: 2010-04-12 10:24

[...] 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）； [...]
手机网站开发必修课[2]：浏览器兼容性测试 said: 2010-04-19 12:19

[...] 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文章）； [...]

回复
SRR said: 2010-04-26 12:20

泪奔啊…
这几天被wap折腾得…

回复
浅议手机上网与web开发 « WordPress said: 2010-05-22 20:51

[...] 现在手机浏览器对很多标准支持都不够（可以看一下挨踢农民工的文章），手机浏览器的显示次序也是从上到下，从左到右，所以说在web设计中把内容放在左边，把边栏放在右边应该是最佳的布局方式。 [...]