场景

滚动加载。用户用触屏设备滚动一个列表页面，在滚动到页面底部时，通过异步请求动态加载数据，再滚再读，如此往复循环。而在实际的测试中，发现部分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 测试后请留下测试结果，附上 手机型号/系统版本/是否有轨迹球。多谢！

分析：

1. 出问题设备的操作系统都是Android 2.1 update1，但相同系统版本的其它设备没有该问题，因此可以排除是系统版本问题。
2. 出问题设备都配有轨迹球，但Nexus One、HTC Magic[G2]和ZTE R750也都配有轨迹球，没有该问题。因此也可以排除轨迹球导致的问题。
3. 以上最有可能的两点猜测都不成立，所以只能怀疑为特定手机的硬件和软件的某些不兼容性导致的底层问题。因为目前得知的问题设备都是带有轨迹球的，而轨迹球产生的滚动和触摸产生的滚动在某些设备上可能会有冲突，因此可能会引起这个问题出现。

解决方案：

底层的问题不是我们能够解决的，但是，我们可以在交互方案上想办法来弥补。

原来的设计是滚动时动态加载列表，所有列表加载的可用性依赖于滚动scroll事件，如果scroll不可用时，页面的功能会受到直接的影响。因此，事件是这个设计的关键。我们可以用比较稳妥的click事件来进行scroll失效时的弥补。废话不多说了，看图吧：

• 原来的设计：
  
• 调整后的设计：
  原文字提示直接改为按钮，按钮包含两种状态：加载时的提示状态和正常待点击状态。
  1. 当scroll滚动事件正常触发时，按钮属性为disabled不可点击，提示“加载中，请稍候…”：
     
     当数据加载完毕，按钮恢复为待点击状态。
  2. 如果遇到问题设备时，即scroll没有触发时，按钮则始终保持待点击状态，提示为“点击查看更多宝贝”：
     
     当用户点击按钮后，则按钮状态又改变为1中的样子，属性改为disabled并提示“加载中，请稍候…”

在调整后的方案中，按钮承载了两重含义：常规按钮和提示文案。通过这种双重作用的按钮形式，为scroll事件的触发加上了双保险，可以很好地规避设备缺陷给可用性带来的灾难。

在触摸设备中，scroll滚动加载虽然带给用户比较好的体验，用起来很爽，但千万别忘了，要考虑到意外情况出现时的可用性问题，这是交互设计和前端开发共同的责任。

兼容性：

兼容iOS(Mobile Safari)/Android(Webkit)/PC(IE除外)，其它未考证

操作方法：

在所支持的Touch设备上，用手指按住图片区域，然后向右（或向下）华丽丽地一拖，随即松开手指。Yeah~

调用语法示例：

$('#J_Gallery').scrollLayer({
    direction:'X', //方向。X代表水平方向，Y代表垂直方向
    wrapEl:'.wrap', //外层容器。用来overflow遮罩的层
    touchEl:'.holder', //touch层容器。用来包裹列表内层元素的层
    childEl:'li', //内层元素。用来放图的层
    margin:5, //间距。以实际元素间距为准
    speed:0.95, //加速度。一般取0.9-1之间
    prevent:true //阻止超链接默认事件
});

已知问题&待改进：

• 个别低配置Android设备上(HTC HERO G3)响应有些迟滞（性能问题？）。
• 暂没有开发图片自动对准功能。

更新：

• 感谢@Chappell提醒，修正onmouseup在拖放范围外释放的BUG（2010-7-19）

演示：http://www.smbey0nd.com/demo/lab/scrolllayer/demo.html

下载：http://www.smbey0nd.com/demo/lab/scrolllayer/ScrollLayer.rar

欢迎大家直接用iOS/Android设备访问短网址：http://2.ly/b9jb 进行测试，如果发现任何问题，请直接留言给我！多谢

• http://www.smbey0nd.com/2010/07/10/touching-and-gesturing-on-the-iphone/
• http://www.quirksmode.org/blog/archives/2010/02/the_touch_actio.html

我先来说说iPhone的控制台，因为我发现它在测试时是非常重要的。在Settings-Safari-Developer下，你可以把它打开或关闭。它提供了一些简单的信息，包括错误、警告等。

当我阅读这份[Apple Developer Connection page]文档之后，虽然它写的很生动和完整，但仍然给我留下了一些细节上的困惑。并且，如果你不是ADC（Apple开发者中心）的会员，看这个文档可能会让你更迷糊。

清理思路

Apple给API加了两个新想法：触摸（touch）和手势（gesture）。触摸用来记录你有多少手指放在屏幕上、它们都在哪里、它们在做什么操作以及它们的轨迹。手势来检测你在用两个手指做什么，是否在捏(pinching)、推(pushing)、或是在旋转(rotating)。

触摸

当你把一根手指头放在屏幕上时，触摸（touch）事件便被触发了。每当一根新的手指放在屏幕上，就会触发一个新的touchstart事件。而当手指抬起离开屏幕，touchend事件便被触发了。如果在手指接触屏幕后，你又挪动了这根手指，那么触发的是touchmove事件。

有以下touch事件：

• touchstart: 手指放在屏幕上时触发
• touchend: 手指离开屏幕时触发
• touchmove: 手指在屏幕上移动时触发
• touchcancel: 系统可以取消touch事件，但我不确定它如何才能触发。我想可能是当你拖放时，接到一个类似短信或者其它事件时，才会触发。但我没有测试成功过。

node.ontouchstart = function(evt){
 console.log(evt.pageX + "/" + evt.pageY);
 // 哦不! 值都是空的，肯定有BUG
}

我的第一个错误，发生在监听这些事件并试着得到这些事件的坐标（pageX, pageY等）时。在再一次看了ADC的文档后，我了解了这三个事件依附于对象。但我不能十分确定，所以我去测试、记录、试验。

它帮助我解决了Apple开发者们一直觉得棘手的问题。在使用鼠标时，你实际上只产生一个点：通过鼠标指针。当你用手时，你可以用两个手指，当你击打（tap）屏幕右侧时，另一只手指可以放在屏幕左侧。

我们的事件对象有一个列表，这个列表包含了每个接触屏幕的手指所产生的信息。它还包含了另两个列表，一个只包含来自相同节点的手指信息，另一个只包含与当前事件相关的手指信息。每一个touch事件都会激活这些列表。

下面就是这个列表：

• touches: 每个接触屏幕的手指所产生的信息
• targetTouches: 和touches类似，但它过滤出只来自相同节点的手指信息
• changedTouches: 只包含与当前事件相关的每个手指信息（见下文）

要更好地理解这些列表，让我们来快速浏览一些例子吧：

• 当我把一根手指放在屏幕上，3个列表都是相同的信息。它会在changedTouches中，因为手指放上去就会触发这个事件。
• 当我放上第二根手指，touches会变为两项，每一根手指都有一项。只当第二根手指放在第一根手指所在节点上时，targetTouches才会变成两 个项。changedTouches的信息和第二根手指有关，因为它触发了事件。
• 当我恰巧在同一时刻放上两根手指时，changedTouches才可能会有两个项目，每根手指一个。
• 如果我移动手指，唯一会改变的列表是changedTouches并且会包含多个移动手指的信息（最少有一个）。
• 当我抬起一根手指，它会从touches、targetTouches中移除，同时它会出现在changedTouches中，因为它又触发了这个事件。
• 移除最后一根手指，会清空touches和targetTouches，changedTouches会包含最后一根手指的信息。

有了这个列表，我可以对用户的操作保持密切的监控。想象一下，用JavaScript创造（另）一个Super Mario的克隆版本。我可以告诉用户，他（她）的拇指在一个什么方向上，同时也可以监控用户的跳跃或发射子弹。

正如我之前所说，这些列表包含了手指触摸屏幕时的信息。这些对象都非常相似，就像你通常看到的那样，在一个事件对象转到一个事件处理器时，一组有限的属性可以用在这些对象上。下面是这些对象上属性的完整列表：

• clientX: touch事件相对于视图（viewport）的X轴坐标（不包括滚动位移）
• clientY: touch事件相对于视图（viewport）的Y轴坐标（不包括滚动位移）
• screenX: 相对于屏幕
• screenY: 相对于屏幕
• pageX: 相对于整个页面（包括滚动）
• pageY: 相对于整个页面（包括滚动）
• target: touch事件所发生的节点
• identifier: 一个id号，为每一个touch事件提供唯一标识

对于桌面Web设计而言，在一个常规的mousemove事件中，进入节点的target属性通常是鼠标当前悬停的属性。但是在所有的iPhone Touch事件中，target则是参照于源节点。

开发iPhone Web App的烦恼之一就是，即使你为你的App设置好了视图区域（viewport），拖动手指时仍会让页面移动。幸运的是，touchmove的事件对象提供了[preventDefault()]函数（一个标准的DOM事件函数），通过这个方法，在你用手指拖动时，可以让页面保持绝对静止。

用Touch API来实现拖放

我们不必像担心mousemove那样费心跟踪down/up事件，因为touchmove仅在touchstart后才会触发。

node.ontouchmove = function(e){
 if(e.touches.length == 1){ // 仅处理一根手指
 var touch = e.touches[0]; // 获取#1号手指的信息
 var node = touch.target; // 寻找拖放开始时的节点
 node.style.position = "absolute";
 node.style.left = touch.pageX + "px";
 node.style.top = touch.pageY + "px";
 }
}

手势

这个比Touch API要容易得多。手势（gestures）事件在两根手指任何时候触摸屏幕时都会触发。如果任何一根手指落在你绑定了手势处理（gesturestart、gesturechange、gestureend）的节点上时，你都会接收到对应的事件。

scale和rotation是这个事件对象的两个关键点。因为，用户在进行捏（pinch）或推（push）的手势时，scale可以提供给你放大或缩小的倍数。而rotation会提供给你用户在用手指旋转时所产生的角度。

用Gestures API实现缩放和旋转

我们将使用Webkit的transform属性来旋转对象节点。

var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){
 var node = e.target;
 // 缩放和旋转都是相对值，
 // 所以要等手势结束时再更改我们的变量
 node.style.width = (width * e.scale) + "px";
 node.style.height = (height * e.scale) + "px";
 node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
}

node.ongestureend = function(e){
 // 更新这些变量，以备后用
 width *= e.scale;
 height *= e.scale;
 rotation = (rotation + e.rotation) % 360;
}

冲突

一些读者可能已经注意到，gesture只是touch事件的一种看起来更漂亮的展现形式。完全正确，如果处理不当的话，你会发现一些古怪的行为。记得在页面中记录当前所发生的信息，当它们出现冲突时，你也许会让这些事件实现”双赢“。

行动

我把这些事件组合在一起，做了个简单的Demo：

这是一个简单的应用，展示了这些API的令人难以置信的灵活性和能力。这是一个简单的灰色方块，可以给它着色、改变边框样式，可以拖放、缩放和旋转。

在iPhone上打开http://tinyurl.com/sp-iphone，并尝试以下操作：

• 把一根手指放到有颜色的方块上，把另一根手指放在有边框的方块上
• 用两个有颜色的方块或两个有边框的方块做相同的事
• 用一根手指在页面上拖放方块
• 缩放、旋转方块
• 一根手指拖放方块，同时另一根手指缩放旋转它；移开一根手指，另一根手指继续拖放它

我还可以做些什么？

通过Apple目前提供给我们的这些API，我们能利用它们来实现哪些更NB的应用？我不清楚。我只知道Apple给了我们一个很深思熟虑的API。

这个新的API，我们可以通过mousedown和mouseup事件来很容易的模仿和学习。mousemove却是一个糟糕的东东。首先，我们只能在手指接触后(相当于mousedown)才可以获得touch事件，而我们不管鼠标是否按下，都可以获得mousemove。此外，防止页面来回跳动并不是我们可以自动控制的。如果给document加一个handler，用户将完全无法滚动页面了！

这也带给我们常规拖放方式的思考。尽管拖放在鼠标键按下的情况下（touchmove的工作方式）只和mousemove有关系，我们仍没有任何方法来决定拖动结束的时候用户的手指在什么节点上（由于target参照源节点）。如果打算使用一个拖放系统，它就必须知道已注册的拖动目标在页面上的位置和尺寸。

注：本文译自http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/，原作者为nroberts。

同时，JQTouch的创始人David Kaneda，以及Raphaël的创始人也已加盟Sencha团队。“在未来的几个月内，我们的合作将会创造出令人惊叹的新东西来。不会等太久的，我保证！”Sencha的CEO Abraham Elias如是说。

Sencha，翻译意为“煎茶”，是指一种在日本很流行的绿茶品种，“我们之所以选择这个名字，因为它会唤醒下一代软件开发并且它很容易记忆、拼写和发音”，在Java开发的传统中，它代表了软件开发的一个新水平阶段。

另外，Sencha还成立了一个基金会叫“Sencha Labs”，以支持非商业项目开发。jQTouch和Raphaël将保留原有的MIT许可证。原JQTouch项目将由Jonathan Stark接手维护和更新。

OK，下面我们来看一下这个来势汹汹的Sencha Touch，它有什么令人惊叹的新东西。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的WEB标准，全面兼容Android和Apple iOS设备。

下面是官方列出的几大特性：

• 基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。
• 支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一个专为Android定制的主题。
• 增强的触摸事件。在touchstart等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。
• 数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

这里有一些DEMO和案例，通过这些演示，我们可以发现下面的这些细节上的特点：

• HTML5离线存储
• HTML5地理定位
• Sencha Touch icon设置
• JSONP代理
• YQL数据代理
• 重力感应滚动
• 滚动Touch事件
• 遮罩弹出层
• 为移动优化的表单元素
• CSS3 Gradients
• CSS3 Transitions
• Multi-Card布局
• Tab组件
• 滚动列表视图
• 其它……

下面还有一段副总裁亲自介绍Sencha的演示视频（Vimeo）：

Sencha是目前为止所发现的最强大的应用于移动平台的框架。它将自己定位为框架（Framework）而不是类库（Library），也可以充分印证这一点。相信随着Sencha的出现，移动平台的Web App用户体验设计会得到提升，同时也会对HTML5和CSS3在移动平台上的普及推广产生很大的促进作用。可以预见，随着HTML5愈加强大的功能，未来的移动应用将会逐渐步入Web App时代，Native App会逐渐走向终结。

关于JQTouch

JQTouch是一个基于JQuery的“老牌”Web App组件库，利用它可以创建创建移动WebKit浏览器（iOS、Android、Palm Pre）中运行的应用程序，并可以模拟Native App的特性。

关于Raphaël

Raphael是一个小型JavaScript库，它使用SVG的W3C推荐标准和VML来创建矢量图形。它的目标是提供一个适配器，让矢量图形能够很轻松地实现跨浏览器兼容。

• Sencha Touch: The end of native; A new touch framework for the Web
• Sencha Blog

Mobile WEB，曾经或者现在，我们或许习惯性地称之为“WAP”，其实叫什么不重要，充其量只是个名字而已——就像Brian Suda在《Introduction to the mobile web》所说的那样——重要的是，我们到底该如何看待它，以及进行哪些思考。如今的“WAP”，早已不是当初只有一些超链接和一个LOGO的WML时代了。在《Mobile Design and Development》一书中，Brian Fling将如今的移动时代称为Mobile 2.0（对应WEB 2.0的叫法），这是个充满了富交互性的智能Mobile WEB时代。在这个时代中，我们利用手中的武器——前端技术，通过不断强大的移动浏览终端，可以实现更多精彩的用户体验，可以让手中的移动设备做出更多桌面设备办不到的事情。

（注意：Mobile 2.0并不同于WAP 2.0。它是指整个移动互联网行业的时代特征，是个广义的叫法。而WAP 1.0主要指WML规范时代、WAP 2.0主要指XHTML-MP规范时代，这种定义是偏技术领域，是相对狭义的）

与桌面WEB前端开发不同的是，Mobile WEB前端开发需要关注更多更杂的东西，并且技能发展的倾向性也会与前者略有不同。移动设备的种类太多，更新频率也真的太快了，因此相应的内置浏览器也会随之发生变化，这些复杂程度会让人觉得眼花缭乱。而对于第三方浏览器，在不同平台下的表现不尽相同，对WEB规范的支持程度也不相同，并且占有率、版本更新频率也并不稳定，同样充满了很大变数。以上这些问题，都是Mobile WEB前端开发领域特有的，并且是需要不断地研究和探索的。

因此，Mobile WEB前端开发的专业特殊性较强，这点需要特别留意。一般来讲，一个桌面WEB前端工程师，如果不经过一段时间的学习和接触的过程，无法立即应对Mobile WEB兼容性问题或基于移动设备特性等问题。另外，从工作流程上讲，Mobile WEB的工作方法也是比较特殊的（具体可以参见我之前《Mobile WEB研发流程》那篇文章）。

在实际的开发方面，Mobile WEB前端开发并不比桌面WEB前端开发轻松，前端开发所需的必备技能一样都不能少。在早期WML(WAP 1.0)时代，其实并不需要前端开发和视觉设计，因为WML不支持CSS和JavaScript，仅支持少量简单的WMLScript，因此几乎不需要考虑兼容性问题。而在目前的XHTML-MP(WAP 2.0)时代，前端所应用的技术集中在XHTML-MP，并已开始向XHTML过渡，加上WCSS和ECMAScript-MP，其技术本质与XHTML并无太大差异，因此样式兼容性是现阶段需要最重点关注的。需要注意的是，现阶段是一个承上启下的交织阶段。我们可以看到，由Android Chrome Lite和iPhone Safari领衔的WebKit时代也即将来临，有先见的企业已经开始了基于这些设备的Mobile WEB(WEB APP)开发。WebKit对WEB标准支持度众所周知，因此在不久的将来，主流的前端技术则彻底升级为XHTML、CSS和JavaScript，而旧技术规范在相当一段时期内也仍会并存。同时，随着HTML5、CSS3的不断成熟，未来将会有更加深入的技术应用；对于设备上的前端性能等更深层次的问题，同样也需要前端逐步地加大气力研究。

Android、iPhone OS(iOS)、Windows Mobile、Symbian^3、Symbian S60、MeeGo(Maemo)、Bada、WebOS……这些帅气的高端智能操作系统，随着厂商的大力开发和推广，终将会成为未来的智能设备主流平台。它们的内置浏览器是未来Mobile WEB前端技术的主要载体。对于这些系统而言，如何发挥出智能设备的最大价值，传递最优的用户体验，是前端开发的最终目标。回过头来，对于旧的中低端系统，如S40、BlackBerry OS、Palm OS、MTK等，在一段时期内仍将有一定占有率，尤其是中国特色的MTK，我们仍无法放弃。因此，对于它们而言，我们的主要工作是尽可能地保证页面兼容性。另外，对于Opera系列、UCWEB、QQ、GO、Skyfire等第三方独立内核浏览器，发展依然十分迅猛，它们在未来将会逐渐归类为两大分支：普通版和智能设备版。对于这些浏览器的渲染特性，依然需要我们继续研究和摸索。

以上就是目前为止Mobile WEB前端开发最主要的使命。

综上所述，未来的前端开发岗位，定将会出现两个不同分支：WEB前端开发和Mobile WEB前端开发（AS方向的前端开发不在讨论范围内），这两个细分的岗位将齐头并进，共同完成传递完美用户体验的使命。

1. 关于Mobile WEB前端开发，其实早在2007年5月，awflasher就曾经提到。
2. 在Mobile 2.0时代，同样也是物联网时代的来临之际。随着通信、电信、互联网三网合一的信息聚合，以及红外传感、RFID、GPS等技术的成熟，其设备并不仅局限于手机，还会扩展到诸如IPTV、车载设备、游 戏机、平板电脑以及各种大小家电设备上。那个时候或许还会有新的跨终端WEB前端开发的细分岗位出现。

ref：Safari Web Content Guide

我给目前正在测试的15款移动浏览器做了一个列表。
在当前移动浏览器如此错综复杂、变幻莫测的形势下，这或许会对给你一些启发。

经常有人问我：“我到底该测试哪一个移动浏览器？”，这个问题意味着，你应该搞定哪些设备。现在我来尝试回答这个问题。

一个移动测试环境

在过去的一年内，我非常幸运。沃达丰不仅有大量的移动设备（译者注：PPK于2009年开始在沃达丰担任顾问和培训师的工作），也有一些人士会提供比较靠谱的建议。比如我需要一台非HTC的带轨迹球的Windows Mobile设备，他们通常会告诉我应该去测哪一台机器，以及为什么这样选择的原因。

但并非每一个人都是这样好的情况。所以，干脆地说，这只是我的建议。

iPhone 和 Android

我假设你已经有了一台iPhone或Android手机。用它来测试你的网站（你可能已经这么做了）。看到最牛B和强悍的移动浏览器，你可能会有很多想法和灵感。如果你的站点不准备支持Safari或Android，那么忘了它吧。

如果你没有iPhone或Android，去借一台。作为一个西方世界的Web开发者，至少也应该会认识拥有一台这样的电话、并愿意（偶尔）用它来测试一下东东的人。

Safari iPhone和Android Webkit并不是完全相同的浏览器，但至少他们都是自家人，特别是当你测试中级到高级的CSS或JavaScript时，他们的处理结果可能会一样好。当然，不包括那些小BUGs。

BlackBerry 或 Nokia

下一步，是做些预算，并购买一款BlackBerry（美国）或者一台Nokia Symbian（欧洲）。它们是最常见最普遍的智能手机，你的网站也应该用它们来进行测试。

选择一个中档的型号。因为最新款的机器太贵了，使用范围也并不广泛；而老款的可能很便宜，但它们的流行程度也是在不断下降的。因此最好的办法就是采取中庸之道。

如果你在欧洲，如果你的网站是面向青少年人群的，那么放弃Nokia，去买BlackBerry吧。因为它是目前年轻人群中（例如16-22岁）最流行的手机。

（译者注：需要注意，在中国大陆地区，有些情况跟欧美截然不同。中国BlackBerry的市场占有率非常低，根据天极网去年第三季度的品牌分布调查结果显示，黑莓手机仅占手机市场份额的0.8%左右）

商业市场

如果你专注于商业性质的网站，目标用户群是高薪阶层和管理者们，放弃iPhone或Android吧，用BlackBerry或Nokia代替，Windows Mobile作为第三选择。

这个问题的关键是，一台商务型手机需要连接公司安全网络中的各种类型的连接。一般的IT部门对新奇的东西会特别小心，他们会更倾向于选择Symbian、BlackBerry和Windows，大型公司几乎从不分配其它类型的手机给员工们。

如果你的商业站点针对美国地区，那么你可以放弃Symbian。

（译者注：在这一点上，中国跟美国企业的环境同样也是有差异的）

可选：Windows Mobile

我假设你的预算现在已经花光了。如果不是，你可能会考虑购买一台iPhone或Android（前提是这两台中的任何一台都没有搞到手），或者一台Windows Mobile手机。

购买Windows Mobile的关键不是购买它的平台，因为平台的版本更新换代的很快。买它是因为可以安装非常多的浏览器，使它成为你的第二个测试环境。当然Symbian(Nokia)也是一个很明智的选择，但是Windows Mobile比它支持更多的浏览器。

看在上帝的份儿上，选择6.5版本的设备吧。不要让我再次重复――别买6.1。你真的会后悔的。

我建议Android和Windows Mobile的设备选择HTC的牌子，因为它值得信任（当然，Nexus对Android的驾驭就更不用说了）。

Opera

在你的手机上安装Opera Mobile和Opera Mini。

Opera Mini可以安装在Android、Symbian、Windows Mobile以及BlackBerry上，这对你应该没啥问题。Opera Mobile则只能安装在Symbian和Windows Mobile上，所以当你只有一台BlackBerry的时候，你就囧了。

Opera Mini非常重要，因为它可以运行在非智能机上，而非智能机的数量大概是智能机的5倍。如果你的网站在Opera Mini上运行良好，那么会增加很多的用户覆盖率。

（译者注：在中国，另有三个品牌的移动浏览器需要关注：UCWEB、QQ浏览器和3G门户的GO浏览器。在CNNIC最近一次的统计报告中，除UCWEB外，QQ浏览器和GO浏览器都是上升最快的移动浏览器，市场份额也在不断升高中）

其他浏览器

去查看我的这个列表，并在手机里安装尽可能多的浏览器，越多越好。

模拟器

尽管如此，我想你现在也只有两个或最多三个用来测试的设备，这意味着你不能够原生地测试全部浏览器。那么我们来看看模拟器吧。

一个比较好的解决方案是PerfectoMobile。这项服务可以让你通过WEB界面来操作一个真正的手机。这里的价值在于真正的手机，所以它所反馈出的BUG等问题也是真实的。

大多数移动浏览器厂商会提供各种模拟器，你可以在本地PC或Mac上安装它们。但是对我个人而言，我不怎么信任它们。因为想要搞一个完美的模拟器，厂商需要把移动浏览器移植到Windows或Mac（或者还有Linux，我想）上，但这并不容易。另外，我曾经发现，有一些模拟器会直接调用你PC中的某个桌面浏览器内核。

我不信任模拟器，所以我不推荐使用它们。也就是说，不管你是否坚持使用它们，我都会坚决地寻找其它方式。一个平庸的解决方案总比没有方案更好。

注意，我不测试模拟器，所以也不能回答关于模拟器的问题。我只关注真正的设备。（完）

（译者注：经过实际的测试，有些模拟器还是比较靠谱的。比如Windows Mobile SDK、Android SDK甚至Opera Mini模拟器等，可以在没有设备时进行快速调试。下文的评论推荐里也有相关内容）

Niels Leenheer：

其实，大多数模拟器，来自官方开发的SDK，并不那么糟糕。例如MobiOne，它们不只是在桌面渲染引擎内置了漂亮的手机图片，实际上它的系统还内置了一个虚拟机。同样的代码，运行在你的手机上同时也可以运行在虚拟机中。

诚然，没什么比在一个真正的手机上测试来得更实在，但对于那些没有能力购买各种电话类型的开发者们，模拟器也是一个很好的选择。

iPhone SDK包含了一个iPhone和iPad模拟器，允许你加载OS 2.0以后的每一个版本。Android SDK也允许你测试多个OS版本和型号。我还发现Windows Phone 7和WebOS 模拟器也工作得很好，但在版本上面限制较多。

PPK回应：

确实有靠谱的模拟器，但我的问题是，如果我说“使用模拟器”意味着我测试过对应的真实设备之后，才发现该模拟器效果很好。我并不打算这样测试，因此我不能正式认可任何模拟器。
但是，像你说的那样，使用它们未必会有很大问题。

chenze：

如果你的目标在中国，那么UCWEB是你应该首先去测试的浏览器。UCWEB是中国最流行的移动浏览器。

上个月，UCWEB已经提交给App Store。iPhone版的UCWEB使用了UIWebView来渲染页面。在其它平台上，UCWEB使用它自己的渲染引擎。

PPK回应：

我尝试过让UCWEB在Symbian上运行，但是失败了。我意识到了它在中国的重要性。我想我会再去试一次。

Eric Anderson：

我注意到，在顶级手机中，你忽略了WebOS(Palm Pre)。它也使用了WebKit内核，所以渲染上应该很相似。

另外，Palm的SDK在VirtualBox模拟器上的效果与手机上完全相同。这意味着这个模拟器真的很不错。目前只有非常小的差异，但都跟浏览器无关，所以如果你不想为它去买硬件设备，那么SDK应该是非常适合来测试WebOS兼容性的。

事实上，它运行在VirtualBox上，意味着你可以在Linux、Mac OS或Windows上测试。而有一些模拟器是针对特定的平台的（我相信iPhone模拟器是要在MacOS上的）。

PPK回应：

我把Palm WebKit从浏览器清单中撤下了，因为我没有可以正常运转Palm的设备，没法测试它。

另外，我恐怕Palm基本上挂了。它们的市场占有率下降到不到1%了，甚至只在智能机领域中也是如此。Palm的消失，只是一个时间问题了。

这是一个遗憾，WebOS显然是继iPhone后最好的用户界面，但是Palm在过去的一年半，犯了很多严重错误，它丢掉了很多机会。

http://farukat.es/journal/2010/03/413-palms-slow-descent-and-google-equation 这是关于它们所犯错误的综述，你会发现，吸引(Web)开发者们去一个新的平台是一个完全失败的计划。当然，Dion和Ben现在牵头做一个扩展计划，但恐怕太少了并且太迟了。

Peter-Paul Koch(PPK)是一位移动平台战略家、顾问、培训师。工作在荷兰的阿姆斯特丹。他专注于互联网技术、移动网站以及W3C的Widgets。

2009年，他从传统桌面浏览器/WEB领域转战到Mobile WEB领域，并且绝不打算回头。他发现，移动设备和浏览器更需要被人们认真对待。（摘自About）

相信PPK是所有Mobile WEB兼容性研究者、开发者们的技术领袖和精神领袖。

IPTV，全名网络协议电视（Internet Protocol Television），是宽带电视（Broadband TV）的一种。IPTV是用宽带网 络作为介质传送电视信息的一种系统，将广播节目透过宽带上的网际协议向订户传递数码电视服务。由于需要使用互联网，IPTV服务供应商经常会一并提供连接互联网及IP电话等相关服务，也可称为“三重服务”或“三合一服务”（Triple Play）。IPTV是数码电视的一种，因此普通电视机需要配合相应的机顶盒接收频道，也因此供应商通常会向客户同时提供自选影像服务。

上文中所提及的“三重服务”或“三合一服务”，其实就是我们通常所说的“三网融合”，是“物联网”发展中很重要的一步。

好了，基本概念普及到这里，需要了解更多，可以移步百度百科或维基百科等各种百科来查看相关介绍。

你应该已经清楚，IPTV最重要的两个部件是“机顶盒”与“电视机”，机顶盒负责处理用户与IPTV的交互事件、解析网页、处理IP数据和视频流以及视频的解码等功能，相当于PC中的主机；而电视机最主要的作用是显示视频图像，相当于显示器。我们要做的网页，是要经过机顶盒中的浏览器进行解析处理，然后输出给显示器来显示的，所以机顶盒是决定了我们开发过程的关键因素。

其实，机顶盒的软件技术架构，与移动设备有很多相似的地方，因为都具有相似的特性：迷你、便携、特定功能，因此注定了其内嵌的操作系统和软件。在设计和开发之前，我们务必要搞清楚，这些内嵌的操作系统和软件的特性，摸清楚这些，我们才可以有针对性地进行最完整设计和开发。下面是一个相对理想化的前端开发步骤模型：

1. 基本UA探测+研究技术规范白皮书（关键）
2. 指导UI设计
3. 前端开发
4. 兼容性测试+调试

我们可以发现，这个步骤与我们“Mobile WEB前端研发”步骤非常相似。其实，对于一个未知的跨平台的设备领域，我们都可以采取这个步骤来做开发，它可以保证最终开发的结果是最具针对性和兼容性的。因此，第一步的研究阶段是最关键的。

基本UA探测

回到正题，我们开始第一步，进行基本的UA探测（很多时候，技术规范文档中写的东西并没有我们直接亲自探测来的靠谱和实在）。对于UA探测方法和源文件，网上有很多，在这里不赘述。下面是探测结果：

UA串：

Mozilla/5.0 (Unknown; U; Linux mips, zh-CN) WebKit/525.1 + (KHTML, like Gecho, demo/525.1)..

Accept MIME：

application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,’/';q=0.5

通过上面一些信息，我们可以总结出以下基本特性：

• 操作系统：Linux/mips
• 浏览器：基于WebKit/525.1内核
• 支持的MIME类型：application/xml,application/xhtml+xml,text/html

通过这个浏览器的内核版本号，经过简单的查找，我们可以知道一些辅助信息：该浏览器特性类似于“Safari 3.0”，疑似Linux下的Midori浏览器。再通过这些，我们可以得知这个浏览器都支持或不支持什么前端特性。当然，在此之前，我们要先看一下技术规范文档是否已经说明清楚这些点，避免重复劳动。

研究技术规范白皮书

索取并仔细查看这个设备的技术规范文档（这次所做的IPTV项目，由于商业保密性，具体型号等信息这里无法给出），下面是它的浏览器所支持的一些基本规范：

• W3C：
  • HTML：HTML 4.01/XHTML 1.1/XML 1.1/XSLT 1.0/WML 1.3
  • DOM：DOM Level 1/DOM Level 2(大部分)/DOM Level 3（小部分）
  • CSS：CSS1/CSS2（大部分）/CSS3（小部分）
  • Script：ECMAScript-262 3rd/JavaScript 1.3/JavaScript 1.5
• 协议：HTTP 1.1/FTP/SSL 3.0/TLS 1.0…
• 媒体：GIF/JPEG/BMP/PNG/MP3/WMA/MIDI/MPG4/AVI/WMV/不支持：Flash
• 字符集：Unicode(UTF-16,UTF-8)/ASCII,ISO/GB
• TV显示：TV resolutions/宽屏16:9,常规4:3/TV优化字体/隔行抗闪烁过滤控制器
• 其它：远程控制/历史记录/Cookies/Cache/不支持：指针浏览、收藏夹、自动完成功能

OK，好在这个规范文档整理得非常全面，对于前端特性的支持方面，我们也不必大费周章地去Google了。根据W3C支持列表中，我们可以比较清晰地看出它支持的范围，至于具体支持到哪种程度，可以在DEMO开发过程中进行摸索。对于一些不支持的特性，需要在设计开发过程中特别小心地避免。例如不支持Flash、不支持指针浏览等特性。

下面是这个设备的特性：

• 不支持字体设置
• 支持多分辨率：720×576/1280×720(Current)/1920×1080
• 安全边框：页面需要预留50px安全距离。

前两点很好理解。关于第三点“安全边框”，这个是做IPTV项目一个很有特色的值得注意的地方。什么是“安全边框”呢？

以720*576大小的网页内容为例，即576*462范围的内容在任何电视上均可见，576*462以外648*520以内的边缘内容在大部分电视上均可见，648*520以外720*576以内的边缘内容在低分辨率电视上不可见，因此，为了保证网页在大部分电视上的可见性，需将重要的数据信息放在576*462以内，576*462以外648*520以内的范围放入标识性的图片，648*520以外720*576以内的范围放入修饰性的图片或背景色：

• Content < 576×462 任何设备可见
• 576×462 < Content < 648×520 大部分设备可见
• 648×520 < Content < 720×576 低分辨率设备不可见

因此，一般情况下，页面四周需要预留50px安全距离。

另外，在实际测试中，发现该系统内存较小，浏览较大网页时很容易发生崩溃现象。

知道了以上所有这些特性和限制，我们心中有了一个大概的设计轮廓。有很多设计时就需要注意的点，我们需要马上告诉设计师们。

指导UI设计

我们需要告诉他们什么？经过之前的这些记录，我们总结出以下这些需要注意的要点：

• 考虑到电视的使用场景，为了增加易用性，网页中的元素要设计成大元素，并且交互效果需要非常明显。
• 目前推荐的分辨率1280×720，四个边要留出50-60像素的安全边框。
• 首要考虑宽度自适应布局，以尽可能适应更多的分辨率。
• 不支持自定义字体，只提供一种固定字体（类似微软雅黑）。
• 根据设备的操作特性（例如焦点式浏览方式），增加一些易用性细节设计。
• 支持CSS3和JavaScript，可以增加更多视觉和交互设计效果。
• 实测内存较小，稳定性差。因此需要注意控制页面的大小，不要使用大图片。

前端开发+兼容性测试

好了，终于到了我们大显身手的时候！等等，在开发之前，除了给UI设计的那些点需要注意以外，还有以下这些点是要先考虑的：

• 需要设置body背景色为黑色#000，以避免大分辨率电视上四周的空白。
• 因为内存较小和稳定性差的原因，我们不能使用CSS Sprites。
• 可以定义一个“微软雅黑”供PC上测试效果，不需要设置其它自定义字体。测试完可以删除这个字体定义。
• 因为焦点式的浏览方式，我们需要明显的焦点反馈。在超链接上使用:focus伪类，并设置高亮背景色。不需要:hover这个东东。
• 可使用tab键在PC中模拟焦点测试。

好了，我们开始前端开发并随时进行调试。在调试过程中，我发现了它所支持的一些CSS3特性：

• 旋转 -webkit-transform
• 圆角 -webkit-border-radius
• 文本阴影 -webkit-text-shadow
• 渐变 -webkit-gradient
• 盒阴影 -webkit-box-shadow

其余的特性，由于时间关系，没有再一一测试。在这整个的前端开发和测试过程中，我们可以随时将一些有意思的灵感和小技巧通过渐进增强等方式加入在页面中。例如，页面刷新后，将焦点设置在搜索框内；在悬停时，加入适当旋转效果，会使用户在使用的时候，感觉更有乐趣（当然了，这些小trick需要跟设计师沟通后才可以最终决定是否采用）

值得一提的是，文本阴影在设置之后，由于电视屏幕刷新率、分辨率等原因，发现实际效果并不像PC中显示的那样理想，反而会给人感觉很模糊很脏的效果，所以实际使用的时候去除了。

OK，在经过一系列的折腾和调试之后，我们的页面搞定了。可以看到，它在我们的电视机上显示效果还是挺不错的：）

（是的，画面中的那是一台电视机，不是电脑显示器）

最后，由于整个开发时间只有几天，比较匆忙，很多细节也没有很详细地去研究。如果有下次开发机会，或许还可以挖到更多有意思的地方。今天天气不错，我要出去玩了，下次见。

• mobyaffiliates：Mobilists 移动嘉年华 217期！

设备动态：

• iPad出货，海量iPad示范影片登上官网 (iPad官网)
• cbinews：山寨iPad燃起战火 厂商达近50家
• iFanr：小众化的 Web OS
• sina：塞班3新平台 诺基亚旗舰N8-00真机曝光
• Admob：Android操作系统平台流量份额将接近iPhone

应用动态：

• Guilhem Ensuque：Adobe应该改变他们的移动战略
• Adobe：对前文的回应与战略辩护 (Adobe移动战略原文)
• imobile：LBS定位服务软件面面看
• cnBeta：QQ for Android 发布
• 163：手机浏览器厂商UCWEB获诺基亚巨额投资

产业动态：

• 物联网时代：电信首办物联网高峰论坛
• cnnic互联网研究：中国物联网-技术研发和产业化先行，应用暂缓
• 移动Labs：关于中国3G用户数的发展趋势

设计：

• iFanr：iPhone 与 Twitter—设计的交集
• iFanr：拇指和触摸的对话——单手触屏手机的大拇指体验
• androidicons：android上的图标设计资源
• noupe：Mobile WEB上的设计技巧和最佳实践

开发：

• IE Mobile：IE Mobile UA字串公布（Windows Phone 7）

  Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0) ;

• FLM：MooTouch – 一个应用于iPhone的新JavaScript框架
  (延伸：jQtouch – iPhone上的另一个JavaScript框架，基于jQuery插件形式)
• 移动Labs：面向三网融合的Web Service系统架构模型

好站推荐：

Expatliving：http://m.expatliving.sg/

介绍：便民生活类的社区站点，聚焦外籍人士在新加坡的生活：购物、餐饮、娱乐、手工艺品等。
特色：这就是之前介绍MooTouch时，其作者设计的移动站点，站点中全面应用MooTouch框架，整站Ajax异步无刷新。几乎可以完全模拟本地App应用程序，他做到了！快用你的iPhone体验一下吧。

下面是这个框架的主要特性：

• 完整的Ajax体验，实时动态内容装载，页面0刷新0转向
• location hash 操作
• 历史记录管理，全面支持浏览器的“后退”“前进”按钮
• 页面渲染时使用Mobile Safari的本地CSS3 GPU加速
• 自动隐藏浏览器地址栏
• 全局事件代理以优化性能
• 其它……

下面是框架核心中的主要功能：

• MooTouch.Clickable：在“onClick”事件执行之前，不再有邪恶的300ms延迟。
• MooTouch.Scrollable：CSS position:fixed不可用已经成为历史。在你需要增加模拟滚动特性的区域，它可以提供给你完全的支持，包括滚动指示、自减速、快速返回边界等特性。
• MooTouch.Swipeable：你可以在任何DOM元素上使用“onSwipe”事件，就像photo gallery那样。
• 其它……

因为基于MooTools的“use-at-will”结构，MooTouch不同于目前其它类似的库。你可以简便地提取你所需要的部分，并用你自己的方式组合使用。同时，也可以使用任何一个已存在的UI框架如iUI、iWebKit、UiUIKit等等配合使用，只需要将MooTouch放在它们的最上面即可控制所有的UI元素。

MooTouch现在仍然处于Alpha测试阶段，将会基于MIT License以开源方式发布。

下面是一段演示视频(Youtube)：

扩展：另一个很酷的iPhone专用JavaScript库 – jQTouch(基于jQuery)