最近在项目过程中，发现了部分Android手机的Webkit对scroll、touch事件响应存在一些问题。而针对这些棘手的问题，我们的交互方案又该如何应对？在这里将一些心得分享给大家。
场景
滚动加载。用户用触屏设备滚动一个列表页面，在滚动到页面底部时，通过异步请求动态加载数据，再滚再读，如此往复循环。而在实际的测试中，发现部分Android手机Webkit并没有正常响应事件。而用轨迹球滚动时却没有这个问题。
兼容性测试
对这个问题，我做了一个Demo并有针对性地观察事件响应的状况。Demo地址：http://www.smbey0nd.com/demo/lab/eventbug/demo.html
测试方法：用Android手机打开该页面，向上向下来回滚动，查看“时间触发记录”，看是否每次都有scroll的记录。
在Demo页面中，共监听了4个事件：onscroll、ontouchstart、ontouchmove、ontouchend。我动用了我所能拿到的所有设备进行测试，详情如下。
已测试设备：
- iPhone 3Gs (iOS 3.1.2)
- HTC Legend[G6] (Android 2.1update1)
- HTC Hero[G3] (Android 2.1update1)
- MOTO XT701 (Android 2.1update1)
- MOTO XT702[MileStone] (Android 2.1update1)
- Nexus One (Android 2.2)
- 索爱X10i (Android 1.6)
- HTC Magic[G2] (Android 1.6)
- ZTE R750 (Android 2.1update1)
出问题设备：
- HTC Hero[G3] (Android 2.1update1)
- HTC Legend[G6] (Android 2.1update1)
BUG描述：
预期结果是，当用手指触摸滚动页面时，scroll、touchstart、touchmove、touchend都会正常触发。而在用以上两台有问题的设备进行测试时，发现scroll和touchend两个事件并非100%触发，而是不规律的触发。有时在滚动数次之后，scroll和touchend会突然触发N次。有点像积攒了N久突然爆发一样。非常诡异。
而用轨迹球来滚动页面的话（两台问题设备均有轨迹球），则scroll事件没有问题，是完全100%触发的。
PS：欢迎参与测试！测试短链接：http://2.ly/cfqj 测试后请留下测试结果，附上 手机型号/系统版本/是否有轨迹球。多谢！
阅读全文 »
本文译自quirksmode.org，原作者为Peter-Paul Koch(PPK)。
原文链接：http://www.quirksmode.org/blog/archives/2010/04/mobile_browsers.html， 转载请注明以上信息。
我给目前正在测试的15款移动浏览器做了一个列表。
在当前移动浏览器如此错综复杂、变幻莫测的形势下，这或许会对给你一些启发。
经常有人问我：“我到底该测试哪一个移动浏览器？”，这个问题意味着，你应该搞定哪些设备。现在我来尝试回答这个问题。
一个移动测试环境
在过去的一年内，我非常幸运。沃达丰不仅有大量的移动设备（译者注：PPK于2009年开始在沃达丰担任顾问和培训师的工作），也有一些人士会提供比较靠谱的建议。比如我需要一台非HTC的带轨迹球的Windows Mobile设备，他们通常会告诉我应该去测哪一台机器，以及为什么这样选择的原因。
但并非每一个人都是这样好的情况。所以，干脆地说，这只是我的建议。
iPhone 和 Android
我假设你已经有了一台iPhone或Android手机。用它来测试你的网站（你可能已经这么做了）。看到最牛B和强悍的移动浏览器，你可能会有很多想法和灵感。如果你的站点不准备支持Safari或Android，那么忘了它吧。
如果你没有iPhone或Android，去借一台。作为一个西方世界的Web开发者，至少也应该会认识拥有一台这样的电话、并愿意（偶尔）用它来测试一下东东的人。
Safari iPhone和Android Webkit并不是完全相同的浏览器，但至少他们都是自家人，特别是当你测试中级到高级的CSS或JavaScript时，他们的处理结果可能会一样好。当然，不包括那些小BUGs。
阅读全文 »
在上次阿尔卡特OT800（淘宝手机“无双”）的WEB兼容性测试后，本次带来的是针对Lenovo：Miro I61，也就是“灵素”的兼容性测试记录。另外，想知道这两款手机的更多信息，欢迎访问淘宝手机官方旗舰店进行更细致的了解。
注意：对于本兼容性测试系列，原始测试数据将不会悉数列出，文章中只会标明需要注意的测试点（兼容性有问题或需要注意的 地方）以提供设计的参考依据。另外，这里只会针对手机内置浏览器进行测试，其它第三方浏览器（Opera Mini、UCWEB、QQ浏览器等，包括OEM版本）将不在此范围内。
[兼容性测试]Lenovo：Miro i61
（照片照得有点骚瑞，需要无码清晰大图请移步淘宝手机官方旗舰店）
基本参数信息
- 上市时间：2009
- 屏幕尺寸：3.2 英寸
- 分辨率：240×400 像素
- 颜色：26万
- 操作系统：非智能机
- 平台：MTK
- 更多参数信息
设备特色
- 触摸屏+软键盘
- 支持720p
- 屏幕左侧带有翻页键，浏览网页时可以移动焦点
- 内置UCWEB浏览器OEM版（不在本次测试范围之内）
- 内置淘宝客户端（手机旺旺、随身购、淘掌柜、支付宝、数字商店、手机彩票等，见官网）
阅读全文 »
从今天起，开始不定期对我所能掌握的移动设备们（当然，主要是手机）进行WEB兼容性测试，并将测试结果总结性地记录在此分享给需要的朋友。测试所使用的工具是之前一直在维护的手机兼容性测试套装，由于涉及到公司商业保密性等因素，暂不便于开放出来。对于测试工具，推荐参考W3C MWI Team的Mobile Web Test Suites Working Group，这里面的工具套装制作得非常全面细致，很棒。
另外，对于原始测试结果的数据记录，推荐使用Excel来做全面的记录。Excel还是非常强大的，经过一段时间的原始数据积累，我们可以用计算公式来做总数、平均值等累加，另外可以生成统计报表，如下图所示，非常帅XD。
言归正传，这次拿到两款机型，分别是
阿尔卡特OT800以及
联想Miro i61，它们也分别是淘宝手机“
无双”、“
灵素”的原型机。作为淘宝定制手机，它们内置了很多淘宝客户端应用软件。想知道这两款手机的更多信息，欢迎访问
淘宝手机官方旗舰店进行更细致的了解。
下面你看到的，是针对Alcatel：OT800的WEB兼容性测试记录。
注意：对于本兼容性测试系列，原始测试数据将不会悉数列出，文章中只会标明需要注意的测试点（兼容性有问题或需要注意的地方）以提供设计的参考依据。另外，这里只会针对手机内置浏览器进行测试，其它第三方浏览器（Opera Mini、UCWEB、QQ浏览器等）将不在此范围内。
阅读全文 »
Comments