最近在项目过程中，发现了部分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。
阅读全文 »
前一阵参与了一个基于IPTV的项目，分享一下这次项目的一点收获。
首先来恶补一下IPTV的一些基本概念和介绍吧：
IPTV，全名网络协议电视（Internet Protocol Television），是宽带电视（Broadband TV）的一种。IPTV是用宽带网 络作为介质传送电视信息的一种系统，将广播节目透过宽带上的网际协议向订户传递数码电视服务。由于需要使用互联网，IPTV服务供应商经常会一并提供连接互联网及IP电话等相关服务，也可称为“三重服务”或“三合一服务”（Triple Play）。IPTV是数码电视的一种，因此普通电视机需要配合相应的机顶盒接收频道，也因此供应商通常会向客户同时提供自选影像服务。
上文中所提及的“三重服务”或“三合一服务”，其实就是我们通常所说的“三网融合”，是“物联网”发展中很重要的一步。
好了，基本概念普及到这里，需要了解更多，可以移步百度百科或维基百科等各种百科来查看相关介绍。
你应该已经清楚，IPTV最重要的两个部件是“机顶盒”与“电视机”，机顶盒负责处理用户与IPTV的交互事件、解析网页、处理IP数据和视频流以及视频的解码等功能，相当于PC中的主机；而电视机最主要的作用是显示视频图像，相当于显示器。我们要做的网页，是要经过机顶盒中的浏览器进行解析处理，然后输出给显示器来显示的，所以机顶盒是决定了我们开发过程的关键因素。
其实，机顶盒的软件技术架构，与移动设备有很多相似的地方，因为都具有相似的特性：迷你、便携、特定功能，因此注定了其内嵌的操作系统和软件。在设计和开发之前，我们务必要搞清楚，这些内嵌的操作系统和软件的特性，摸清楚这些，我们才可以有针对性地进行最完整设计和开发。下面是一个相对理想化的前端开发步骤模型：
- 基本UA探测+研究技术规范白皮书（关键）
- 指导UI设计
- 前端开发
- 兼容性测试+调试
我们可以发现，这个步骤与我们“Mobile WEB前端研发”步骤非常相似。其实，对于一个未知的跨平台的设备领域，我们都可以采取这个步骤来做开发，它可以保证最终开发的结果是最具针对性和兼容性的。因此，第一步的研究阶段是最关键的。
阅读全文 »
在上次阿尔卡特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