截取自:http://ued.taobao.com/blog/2010/01/03/手机网站开发必修课2009总结版
手机用户设备统计分析
拥有全面的用户数据,无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征;而外部数据能告诉我们大环境下的手机用户状况,并且能在内部数据不够充分的时候给予我们一些非常有用的信息。
从外部数据来看,09年10月到11月期间
国内浏览器品牌市场占有率前三甲为:
- Nokia(78%)
- Opera(OEM) (10%)
- iPhone(Safari) (3%)
国内的手机操作系统前三甲为:
- Nokia SymbianOS(80%)
- iPhoneOS(6%)
- SonyEricsson(5%)
当然,作为中国的手机网站开发者,不能忽视强大的山寨机市场(或者应该叫作做国货精品手机市场?)。顺便提一下,这类手机通常使用的是MTK操作系统。
(以上数据均来自statcounter.com)
手机浏览器兼容性测试结果概要
注意:以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达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的测试页面时,会显示内存不足