关于移动web开发

2010-12-30

最近在开发无线js代码库,拿到了Android测试机N1,这几天的测试过程中,发现了Android2.2里chrome lite的一些问题,记录在本文最后。

试用过Andorid浏览不同的网页后觉得,移动web开发应该尽量避免类似桌面应用那样的富客户端体验,因为本身各种手机性能参差不齐,而且性能最好的iPhone4也并没有好到哪里去。桌面的IE6虽然比chrome性能差几十倍,但在强大的桌面硬件支持下普通富客户端应用差别很小,甚至感觉不出来,但手机上就不一样,差别明显,性能低到无法忍受。

我在Android下试了sencha/jqtouch/jquery mobile,体验都不好,很卡很慢,如果只是针对iOS平台的浏览器还好,如果是针对所有平台的,还是不要用这么复杂的框架。速度快是最重要的体验元素,这在移动web上主要表现在渲染的速度。而一些锦上添花的效果有时不仅影响速度,还会有更差的体验出现,例如jquery mobile在滑动切换页面时会不断调整位置,或者隐藏显示地址栏,导致页面闪了几下,体验不太好。

做移动web开发,我目前想法是:

  1. 最重要的是写好css让页面显示适应屏幕,但同时CSS3带来的特殊效果尽量少用,特别是list的渐变背景最好不用,会拖慢页面的渲染。
  2. 少用或不用动画,虽然css3动画在iOS上表现不俗,但至少在Android上表现不佳,很卡的动画比没有动画效果更差。
  3. 功能性的交互可以多(如dom切换/ajax,但要极力优化),效果性的交互尽量少(例如手指拖动元素,slider等组件)。

如果要在手持设备上有足够丰富的交互体验,还是做原生APP靠谱。如果不考虑各种浏览器的兼容,只考虑iOS,那能做的事还是挺多的,感觉sencha touch就只是为iOS准备的。但在iOS上浏览器的性能也无法跟原生APP比,差得很远,而且如果只支持iOS,web失去了跨平台这个特性,也就没多大意义了。

附:Android2.2浏览器的问题

触摸屏

  1. touchmove触发次数太少
    表现在两个方面:
    Ⅰ.拉住页面拖动的时候,触发touchmove事件的次数比ios少了一两倍。
    Ⅱ.手指滑动速度太快(像翻页那样)时touchmove几乎不触发,或只出发一两次。ios上会出发很多次。
  2. 在某一个元素侦听touch事件,如果两次touchstart间隔时间太短,touch事件就不再作用到那个元素上,穿越了这个元素直接作用在页面上。这个问题在touchstart时preventDefault可以解决。

总的来说就是,触摸不灵敏。

渲染

  1. 页面上用CSS3渐变时,特别是全屏背景颜色渐变,渲染会变慢很多,拖动会变得很卡。
  2. 有些渐变颜色在页面移动过程质量会变低。

事件

  1. 不支持gesture事件,可以理解为因为很多android手机多点触摸功能很差,直接把这个功能干掉了。
  2. Android2.1以下不支持orientationchange事件,需要用resize事件模拟。我测试的N1 Android2.2支持这个事件。
  3. Android2.2的浏览器支持position:fixed这个css属性,2.1以下版本支持情况不明。它viewport的概念跟iOS mobile safari是不一样的。
分类:互联网 Tags:
评论

*

*

2011年3月17日 18:02

师兄居然也搞这个!!哈哈……

2011年5月16日 0:05

[…] http://blog.webang.net/internet/1531/ 此条目发表在 转载 分类目录,贴了 互联网, 移动web […]