Chinaunix首页 | 论坛 | 博客
  • 博客访问: 188441
  • 博文数量: 16
  • 博客积分: 1410
  • 博客等级: 上尉
  • 技术积分: 425
  • 用 户 组: 普通用户
  • 注册时间: 2004-11-28 21:01
文章存档

2010年(16)

我的朋友

分类: 项目管理

2010-08-02 19:33:06

从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多。

手机网站开发,有着许多不为人知的困难:

一是可参考的资料太少,大部分手机网站都处于起步阶段,很多的时候都是摸着石头过河,而鉴于淘宝自身的特殊性,也使得我们在参考成功案例之余,要做更多的思考;

二是兼容性工作异常艰辛,难度一点也不比web网站的兼容性工作来的低(关于这点,请参见我之前的);

再者作为一个手机网站的前端开发,也往往容易被人忽视(包括我们自己),大家也许会觉得做好一个手机网站能有多难,了解一点XHTML、一点CSS,甚至不需要对JavaScript有什么研究,事实却不是如此,正因为手机网站的开发受到设备的太多限制,前端们常常为了节约几个字节而纠结万分,写出语义化良好的代码也显得更加重要,而多版本的开发需求也对于JavaScript的优雅降级要求甚高,这样才能使得网站有分版本需求的时候可以公用同一套XHTML代码,最大程度的降低开发成本。

对于手机网站来说,相信现在仅仅只是个开始,随着各种新机型的相继面世,这块领域必将成为兵家必争的新高地。

注意由于手机网站发展迅速,请参阅者注意本篇文章的发布时间。

目录

  1. 手机用户设备统计分析
  2. 手机浏览器兼容性测试结果概要
  3. 手机网站开发中你需要注意的问题
  4. 推荐参考资料
  5. 总结

手机用户设备统计分析

拥有全面的用户数据,无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征;而外部数据能告诉我们大环境下的手机用户状况,并且能在内部数据不够充分的时候给予我们一些非常有用的信息。

从外部数据来看,09年10月到11月期间

国内浏览器品牌市场占有率前三甲为:

  • Nokia(78%)
  • Opera(OEM) (10%)
  • iPhone(Safari) (3%)

国内的手机操作系统前三甲为:

  • Nokia SymbianOS(80%)
  • iPhoneOS(6%)
  • SonyEricsson(5%)

当然,作为中国的手机网站开发者,不能忽视强大的山寨机市场(或者应该叫作做国货精品手机市场?)。顺便提一下,这类手机通常使用的是MTK操作系统。

(以上数据均来自)

手机浏览器兼容性测试结果概要

注意:以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征的手机,但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的:

  • 表单元素的“disable”属性

部分手机不支持的:

  • “button”标签
  • “input[type=file]“标签
  • “iframe”标签。

虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

少数手机不支持的:

  • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。

CSS部分

大部分手机不支持的:

  • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
  • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
  • “font-style: italic;”:同上;
  • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
  • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
  • “background-position”属性:但背景图片的其他属性设定是支持的;
  • “position”属性;
  • “overflow”属性;
  • “display”属性;
  • “min-height”和”min-weidth”属性;

部分手机不支持的:

  • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
  • “pading”属性
  • “margin”属性:更高比例的手机不支持”margin”的负值。

少数手机不支持的:

  • 少数手机对CSS完全不支持;

JavaScript部分

这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级。

其他

  • 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片
  • 另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计
  • 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条
  • 少数手机在打开超过20k的测试页面时,会显示内存不足

开发中你需要注意的问题

  • 手机网页编码需要遵循什么规范?
    遵循XHTML Mobile Profile规范(),简称为XHTML MP,也就是通常说的WAP2.0规范。 
  • Developershome:XHTML MP 教程.html ()

经典开发文章

手机型号查询

总结

目前来说,手机网站开发是个典型的设备驱动开发的过程,页面被设计成什么样,能做到怎么样,几乎全取决于目标客户的手机设备情况。

所以,对手机设备的了解,对于设计开发过程有着直观重要的作用,对于前端来说,就需要有计划的进行长期的手机浏览器兼容性测试,什么样的设计能被实现,什么样的标签可以使用,这些都需要有数据的支持。

我们必须有这样的认知,开发的手机网页总是会在或多或少的手机设备上出现问题,因为我们永远无法知道所有用户的手机设备情况,所以我们更要尽量的遵循标准进行开发,这样才能将满足用户的比例做到最好。

任何一个领域都有值得你进行深入了解的地方,即使现在看起来,手机网站的开发还有点不入主流,但我相信,随着手机设备的更新换代,总有一天它也会成为我们占领客户的一个重要战场,iphone这类有符合web标准的浏览器的手机发布,也给了我们更多的信心。

阅读(898) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~