作者：[美]Stephen Woods著

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

HTML5触摸界面设计与开发试读：

前言

在我写作时, 11.42%的网页流量来自移动设备（根据StatCounter.com的统计数据）。这个数字一年前是7%，三年之前是1.77%。虽然桌面设备还会陪伴我们一段时间，但是Web的未来是在移动设备上的。

对于Web开发者，支持移动设备是自21世纪初的Web标准革命以来最大的变革。移动设备都搭载了支持HTML5的现代浏览器。它们还装有容量较小的内存和缓慢的CPU，经常通过高延迟的网络来连接。而且它们几乎全都有触摸界面。

为移动设备开发就是为触摸开发。许多桌面Web开发中的技巧对于移动Web依然适用，不过有些却是完全不同——弄清楚这些不同会有一定难度。我写这本书来帮助你去弄清楚它们。

谁适合读这本书

这本书是为两类读者写的:

■ 经验丰富的Web开发者，但从未开发过移动或触摸界面的网页，想要学习

■ 一直致力于让他们的移动版网站更优秀的开发者

这本书不适合绝对的初学者。你需要有Web前端的背景知识：HTML、CSS和JavaScript。对HTML5、CSS3的新接口和功能有一定经验会更好。

最重要的是，这本书适合那些并不满足于他们的移动网站的现状的人。如果你想要建设一个迅速而流畅的网站，这本书再适合你不过。

你将能学到什么

本书专注于触摸界面的开发，内容结构和优化网站思路大概一致。上半部分涵盖了我认为能使各类网站，特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站，并能快速加载。第4章可以帮助你使用缓存来提高用户再次访问时的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际上和感觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的，特别是尽可能地让它们更平稳和快速。随着层层深入，本书也逐渐复杂和深奥。如果你觉得后面的章节太难了，先尝试在工作中运用你所学到的东西，再回头来看我在本书末尾介绍的一些想法，如一个好用的移动网站不需要双指缩放的功能。

你需要用到什么

如果你想要在本书中学到更多东西，除了你的电脑外，你至少还需要一台触摸设备。如果只能有一台，我推荐iOS6或Android 4的设备。如果条件允许，上述两台都有是最理想的了。

开发移动网页时，设法利用尽可能多的设备。iOS和Android模拟器无法取代真机。在写这本书时，我使用了一台搭载 Android 4.0.4 的 Samsung Galaxy S III、一台iPhone 4、一台iPhone 5、一台iPad 1，还有一台HTC 8X (Windows 8)。再用模拟器作为补充。

在Flickr，我们拥有的设备和上述类似，不过还有一些Android平板和一台Kindle Fire。

框架

本书没有用jQuery或是其他任何JavaScript框架。你会了解到一些专用的库，不过我们还是尽可能多的关注原生的DOM API。这并不是说你应该避免使用框架或者远离框架！只是我想要确保你能理解这些东西最根本的原理。这样，当你决定使用jQuery mobile、Backbone.js、Zepto.js或是其他框架时会更轻松。

理解原生DOM API的另一个巨大的好处是，当你在某个库中找到一个bug的时候，你可以自行修复并创建一个包含你修复代码的pull request，从而造福整个社区。

配套网站

本书上的所有示例代码和最新的改动可以在配套网站：touch-interfaces.com上找到。这些代码也在GitHub上做了镜像，在这里你可以找到有关示例代码的issue，还可以提交pull request到：https://github.com/saw/touch-interfaces。欢迎进入移动网页

网页是用HTML、CSS和JavaScript构建的。移动网页也是一样。只需要一个网页浏览器和一个文本编辑器就可以开始，但要更高效的话，我建议再多几个工具。

工具

最简单的过程，是用一个文本编辑器和桌面浏览器开发，然后在旁边准备一个触摸设备用来测试。

一个文本编辑器 & 一 个WebKit内核的浏览器

我用适用于 Mac OS X 的TextMate 2 (github. com/textmate/textmate)，不过任何其他的编辑器都没问题。

因为绝大多数的移动设备运行的是WebKit的浏览器，所以，你会发现Chrome或Safari是能提高效率的必备工具。虽然与真实设备上的测试会有些不同，但它简单易用，必不可少。

一个Web服务器

为了在真实的设备上测试网站，你需要通过无线局域网提供页面。在Mac上，我发现 MAMP (www.mamp.info)是一个非常方便的工具，不过使用内置的 Apache Web服务器同样可以。

一台触摸设备

没有什么可以替代一台真实的设备。如果你能负担得起的话，我建议型号较新的Android手机和iOS设备各有一部。如果你只买得起一部，找到愿意借手机给你测试一段时间的人，会有很帮助。

跨设备平台测试

不能想当然地认为所有的 Webkit 的浏览器都是一样的。你应该在 iOS 5、iOS 6、Android 2.3、Android 4.0、Android 4.1 (Chrome)和IE 10里面测试你的App。如果你不能直接使用这些设备，这里是如何对它们进行测试的指南。

IOS SAFARI

Apple提供了一个相当好的模拟器XCode。它可以模拟搭载 iOS 5 或 6 的平板和手机。它还支持结合Safari浏览器的远程调试。这真的是一个伟大的工具，假如你有一台Mac，这是这堆工具中关键的一部分。 XCode 在Mac App商店免费提供。

ANDROID

谷歌提供了几乎所有版本的Android的模拟器。这些都可以 在 Android SDK （developer.android.com/SDK）中找到。只要有了Android SDK，就可以分别下载各种Android版本的镜像。请记住，这些都是谷歌官方的版本，Android版本在实际设备上可能有很大不同。

WINDOWS 8

微软确实提供了一台针对 Windows Phone8 模拟器，它在 SDK（dev. windowsphone.com/ en-us/downloadsdk）中。模拟器只能在Windows上运行。IE10的移动版与桌面版是相同的，所以大部分Debug工作可以在桌面上进行，而不是在模拟器里面。

DEBUGGING

调试手机网页是一个苦差，但也有很多工具使其变得更容易。我提供了一些工具的列表，在配套网站上的附录A中。作者简介

Stephen Woods是Flickr团队的一名资深前端工程师。从20世纪90年代起，一直致力于Web用户界面的研发。2006年Stephen入职Yahoo!。在加入Flickr团队之前，他开发支持Yahoo!主页的JavaScript平台，还曾在Yahoo! Personals的UI团队工作，并且是一位精通Web的全栈工程师，但主要兴趣是使用Web技术构建响应式的用户界面。Stephen曾在SXSW和HTML5DevConf就触摸交互进行技术分享，并发表在《.net》杂志上。第1章移动设备概述

一切都因iPhone开始。在这之前，手机网页就是其桌面网页的简化版。极少数浏览器能够支持JavaScript，大多数浏览器只是将网页转化成适合小屏幕而已。iPhone上的Safari是一个真正的Web浏览器，它支持JavaScript和CSS。不仅如此，它还是一个非常前沿的浏览器。为iPhone设计的网站可以使用一些新生的工具套件，即现在的HTML5。如今，市面上有数百种的移动设备在售。它们千差万别，各有千秋，但它们有一个共同的特点：先进的Web浏览器和触摸界面。1.1 触摸设备和桌面设备之间的差异

大多数触摸设备是移动设备。为桌面设备开发网站的开发者最担心的是它们的网页能否兼容各种浏览器。所以，开发者很大一部分的工作是理解各种浏览器之间的差异。

移动领域问题不在于各种浏览器，而在于不同的移动设备。当然，有几种不同的移动浏览器，并且它们之间的确存在一些差异，但大体上移动设备版本与其相应的桌面版本差异不大。移动设备和桌面设备真正差异在于以下4个因素：

■ 规格

■ 计算能力不足

■ 人们如何使用它们

■ 触摸界面

1.1.1 规格

移动设备和台式电脑（或笔记本电脑）之间最明显的差异是尺寸。移动设备的尺寸比较小，所以搭载较小屏幕，且没有鼠标，大多数情况下也没有键盘。

触摸设备目前主要有三种规格：手机、小型平板和大型平板。大型平板包括iPad（不包括iPad mini）和各种10英寸的Android平板，如Nexus10。小平板屏幕一般约为7英寸，如Nexus7、Galaxy Note和iPad mini。

所有这些设备上的浏览器始终都是全屏的。用户“调整”浏览器大小的唯一途径是通过旋转移动设备在横向和纵向模式之间进行切换。只为一种尺寸的设备优化并不困难，困难的是要确保你的网站适用于所有的设备。

1.1.2 移动设备的计算能力不足

写本书时，最强大的触摸屏设备是第四代iPad。它是性能强大的机器。根据相同的标准，它的性能与2004年发布的Power Mac G5（最后一代摩托罗拉版）相同。

可以肯定地说，大多数用户并没有使用最新和最强大的移动设备。大多数运营商提供“合约”手机，如iPhone 4和三星Galaxy Exhilarate，这些手机的运行速度要慢得多。它们的CPU性能和20世纪末、21世纪初最快的台式电脑差不多。iPhone 3GS仍然被广泛使用，它拥有单核处理器、256 MB的内存，CPU性能大致相当于最后一代与CRT显示器搭配销售的iMac。虽然移动设备的性能仍在继续增长，但与一般桌面电脑的性能相比，它们还是太慢了。值得高兴的是，大部分近期发布的设备都拥有独立的GPU。一个iPhone 4在性能上可以被认为是一台装有强大图形处理器，但性能稍逊的电脑。

1.1.3 人们使用触摸设备的方式大相径庭

人们使用手机和桌面电脑的习惯不同。人们使用桌面电脑一般是为了完成特定的工作，所以可能不会做很多其他的事情。至于移动设备，不论是手机还是平板电脑，通常人们都是在做别的事情的间隙来使用它们。他们可能正在乘坐公交车、排队等候或只是在参加一个无聊的会议。

例如，你搭建了一个财经新闻网站。在桌面电脑上，用户可能会花费一段时间单击几次链接，然后用几分钟的时间阅读一篇文章。而移动用户可能正在做一件别的事情，只会在空闲时的几秒时间来完成上面的操作。桌面网站的速度一般不慢，且桌面用户的容忍时间更长。如果你的网站载入时间有一点长，用户就会切换到别的标签去看其他的东西，然后再回来。但在手机上，用户永远不会给你这样的机会。

移动设备就是触摸设备

所有在售的新型智能手机和平板电脑有着一个非常重要的共同特点：它们都具有触摸界面——在大多数情况下，还可以多点触控。合适的大小、美观的屏幕以及其他的先进功能，这些功能相对于使用触摸屏这样的革命性革新，都只是微小的改进而已。1.2 广泛使用的设备

在2007年，iPhone刚出现时，没有任何一部其他的手机拥有真正能触摸感知的Web浏览器。也没有任何支持多点触摸的设备。其他的智能手机大多数使用手写笔进行交互，当时市场上的几种平板电脑也是一样。今天，市面上流通的有数百种触摸设备。我们不可能了解每一种新设备，不过它们可以根据操作系统、规格、搭载的Web浏览器将它们分为几类。

1.2.1 操作系统

如今市场上有四种主要的操作系统适用于触摸设备：

■ iOS

■ Blackberry OS

■ Android

■ Windows 8

Android是目前最流行的手机操作系统。根据International Data Corporation (IDC)的数据， 2012年第三季度智能手机出货量的75%运行的是Android系统，14.9%运行的是iOS系统。其他操作系统的市场份额只有个位数（这不包括的Windows Phone 8，因为它在2012年10月才发布）。

iOS

iOS是所有苹果手机和平板运行的操作系统。因为苹果控制着硬件，所以所有的iPad和iPhone能以相同的方式运行，只有大小和处理能力上的差异。苹果推出软件更新时无需依赖运营商，这意味着，苹果设备更容易运行最新版本的操作系统。iOS开发者， David Smith，发现他开发的应用程序的用户中，有79.2%正在使用的iOS 6或更高版本（相对2012年12月）的操作系统，有94%的人正在使用5.1或更高版本的操作系统。

注: David Smith 会在他的网站（david-smith.org/iosversionstats/）上更新这些统计数据。

苹果随着操作系统的升级同步升级浏览器，它不允许用户安装不同内核的浏览器。至少现在，可以认为iOS用户主要安装着上一个较新版本的iOS和iOS Safari。

ANDROID

Android的情况很不一样。Android是开源的，手机厂商有权自由定制成他们认为合适的样子，所以在手机之间实际的用户界面差异很大。

Android有三个主要的版本：2、3和4。Android 3.0（蜂巢）是平板专用操作系统。大约50%的Android手机运行着2.3.x（姜饼）。最新版本的Android 4.1（果冻豆）并没有被广泛使用，在2013年1月，只有不到10%的设备在运行它，不过这一数字正在迅速增长。时下的“旗舰”手机，如Samsung Galaxy SIII，仍然搭载着Android 4.0.x（冰淇淋三明治）系统出售。 Android 4.1同时支持平板电脑和手机。

注:谷歌在developer.android.com/about/dashboards/提供了各版本的统计

Android包括一个默认的浏览器，而且允许让用户安装不同的浏览器。4.1版之后， Android上默认的浏览器改为了Chrome。

Kindle Fire

Amazon Kindle Fire运行着高度定制版的Android，这个定制后的版本不包括任何原生的Android应用程序，并拥有自行研发的浏览器，称为Silk。值得注意的是，Silk因其在客户端设备和Amazon云上的运行能力而知名。这样可以显著地提高性能，尤其在高延迟的网络链接下。这对开发者有一些影响，我们将在第4章“提高下一次的访问速度”中阐述。

BLACKBERRY OS

Blackberry手机是最早真正获得成功的智能手机。但到了2012年12月，其市场份额已经迅速减少至大约4.3%。Blackberry也出售平板，称为Playbook。这两种设备使用相同的基于WebKit的网页浏览器。尚存的非触摸屏式的黑莓设备占据着智能手机市场的长尾。

WINDOWS

Windows Phone 8包含了微软第一个完全触摸式的浏览器。这款手机配备了内置的Internet Explorer 10，也有创建运行于HTML5环境的应用程序的能力。

1.2.2 设备规格

桌面和移动设备之间最显著的差异是规格。移动设备有两种主要的规格：手机和平板电脑。

手机

最常见的触摸设备是智能手机。除了极少数例外，它们都具有相同的基本规格：呈矩形并有纵向的触摸屏。开发手机网站时要考虑的最重要的事就是小尺寸的屏幕。需要保证交互元素的尺寸足够大到可以用手指来操控，并且内容能在小屏幕上展现得合适。

平板电脑

平板电脑的类型更多样化。它们中从微型的Galaxy Note（5.3英寸屏幕）到13英寸的Windows 可变形平板电脑。有些平板电脑，比如iPad，通常在纵向方向使用。其他的则是在横向模式下使用。就像手机一样，所有平板电脑都装有全屏的浏览器。

尽管有着这样的区别，但实际使用中的平板电脑是差不多的：iPad的销量超过了所有的竞争者，并稳定赢利。在其他的制造商中，唯一拥有两位数市场份额的是三星。平板电脑最流行的规格是10英寸（如iPad）和7英寸（如iPad Mini和Kindle Fire）。

硬件图形加速

正如之前所提到的，一部iPhone在性能上可以被认为是一台装有不错的显卡但性能稍逊的电脑。各个设备的CPU和内存各异，图形硬件也是这样。在Android 3.0之前，浏览器完全没有图形硬件加速功能。这意味着，某个动画的效果可能会在iPhone 5上流畅，但在运行Android 2.3.3的旧手机上不会同样流畅。

目前所有的移动设备在绘图上，都使用所谓的“共享内存”。与桌面电脑上的显卡不同，移动设备上的图形硬件没有专用的内存，只是共享系统内存。这意味着，随着越来越多的东西被添加到图形存储器，系统可用的内存会越来越少。在我们随后讨论图形加速时，牢记这一点很重要。

1.2.3 浏览器

幸运的是，浏览器的情况远没有移动设备复杂。WebKit无疑是最流行的移动浏览器内核，它支撑着所有的苹果、Android和黑莓设备的默认浏览器。Windows手机运行IE 10。最流行的另类手机浏览器是Opera Mobile，但只有不到1%的市场份额。

WebKit

WebKit起源于名为Konqueror的开源浏览器的引擎。苹果将它进一步开发为WebKit，作为Safari背后的浏览器引擎。WebKit的是一个非常强大的引擎，也是第一代 iPhone如此成功的原因之一。在 Android 4.1之前，一个通常被称为“Android Browser”的基于WebKit的浏览器被安装在了Android设备上。4.1时，它被同样是WebKit 内核的“Chrome for Android”浏览器取代。

基于WebKit内核的浏览器比较相似，但又不完全相同。不同的WebKit的浏览器之间的渲染行为非常近，不过因为存在一些小的分支，所以在功能支持上有很大不同。当它们出现差异时，我会提醒大家。

iOS Safari

iOS版的WebKit是iOS上唯一允许的浏览器引擎。它通常通过Safari浏览器运行，也可以在原生应用程序中通过Cocoa UIWebView类运行。

Android Browser

Android Browser，即在Android中名为“浏览器”的应用，是Android内置的浏览器。它是基于WebKit的，而不是Chrome。Android浏览器的功能在不同版本中有很大差异。令人惊讶的是，并不是越新版本的浏览器有越多的功能。Android 2.3.3的浏览器在某些方面比4.0.1功能更全面。我稍后会指出它们之间的差异。

Android版的Chrome

Android版的Chrome通常比桌面版Chrome的稳定分支落后一个版本。在Android 4.1上，Chrome已取代了先前的原生浏览器。

Windows版的IE10

IE10 不同于所有先前版本的 Internet Explorer，它与 WebKit 的功能相同或相近。IE10有完全不同的触摸事件API，但功能是相同的。

其他浏览器

还有许多其他的浏览器。最流行的是Opera Mobile和Firefox移动版，它们都适用于Android。这两种浏览器都非常强大，能实现的功能与WebKit大致相同。我会提醒大家它们语法的不同点。1.3 HTML5

所有移动浏览器所共有的，为支持先进浏览器而存在的功能，被统称为HTML5。那究竟什么是HTML5？

严格地说，HTML5是指网页超文本技术工作小组（WHATWG）规定的标记语言和API集合。它通过定义能满足网络应用需求的功能，取代了HTML4，在HTML5提出伊始，就已经超越了HTML最初以文档为中心的模型。

实践中，HTML5已经成为一套标准化技术和新兴技术的代名词。这个新兴技术极大地拓展了传统的“Web堆栈”（HTML，CSS和JavaScript）。

1.3.1 规范

不像以前的HTML规范，WHATWG决定不定义HTML5的正式版本。相反，HTML5 （现在正式更名为“HTML”）是一个动态的标准，允许在一个临时的基础上增加新的API和功能。万维网联盟（W3C）正在努力创造一个官方的、规范的版本。

由于HTML5是一个动态的标准，那么浏览器制造商增加新功能时，该功能可能还没有标准化。这意味着，不同浏览器之间在功能的整体上是类似的，但可用的特定功能和实现有差异。

知道它们成为规范的原因是固然是有用的，但现在，开发人员更需要知道不同浏览器各有什么特点，以及如何处理它们。在这本书中，我会注意哪些功能是已部分标准化的，哪些功能是新出现的。

注: HTML5 的“动态标准”规范写在了www.whatwg.org 上，完整的W3C官方规范写在了w3.org上。

1.3.2 组件

我们所说的HTML5，它的能力来自广泛的技术组件。用CSS3（以及来自浏览器厂商的尚未列入标准的其他CSS功能）创造动态和优美的界面，不会以牺牲响应效率为代价。

在这本书中，我把HTML5作为更广泛的组件来考虑。不幸的是，目前完全“遵循规范”，不足以给我们提供能创建强大触摸交互的工具。未来，我希望有更多的标准化的功能和新的API。与网络相关的事总是让人兴奋，包括移动网络，因为它总是在变化，我们作为开发人员也必须随之改变。1.4 神秘谷，是什么让触摸界面反应灵敏？

我有个两岁半的儿子。他从一岁开始就能解锁iPad并找到他想要的应用程序。他还不会说话，就会解锁iPad。我与其他家长交流意见，发现并不是因为我的儿子智商超群。触摸界面给了孩子们直观的感受：触摸和移动东西，是人类做的最基本的事情之一。触摸界面直观又强大。但它也很容易令人失望。

有一个理论在机器人学里被称为“神秘谷”：机器人看上去越像人，就越对我们有吸引力，但当机器人的外形快要逼近真人的时候，会让我们觉得很奇怪，甚至被吓得毛骨悚然。“谷”是机器人与人类相似程度与人类舒适度等级的映射关系的拐点。

触摸界面让人感觉很自然，感觉像在移动周围真实的物体。不正确的运用时，给人的感受不是慢，而是失望。直接操纵的假象被打破时，触摸界面也不再让用户感觉自然。这种失望感仿佛掉进了神秘谷，用户不再感觉自然，而是感觉怪异。

1.4.1 传送长奥布莱恩和直接操纵

像我这一代的许多人一样，我第一次触摸界面是通过《星际迷航：下一代》。如果你没有看过的话，可以想象一下：船上所有的控制面板为触摸屏，实际上是多点触摸界面。显然，这样做的原因完全是因为预算。电影的创作者希望在所有的控制面板中表现大量的复杂性，但以一个脱口秀节目的预算支付不起建造这些设备的费用。于是，他们想出了在胶片上印出界面，并在后面用灯光，创造出触摸屏的外观的方法。

传送长奥布莱恩，也就是操纵这艘飞船的人，用三指滑动手势来发动飞船。我觉得那个手势真的很有趣。界面上有三个滑块，演员会自然想到去触摸和拖动滑块，就好像操纵真正的物体。这是人们所期望使用触摸界面的方法。当他们触摸屏幕时，能凭直觉感到，与它进行交互，就像在移动一个真正的物体。

苹果的触摸接口指南称这个概念为“直接操纵”，而不是通过控制器来控制。在理想情况下，触摸界面给用户的印象是，直接操纵交互的东西。

你会注意到，当传送长奥布莱恩的手指移动时，小指示器也在随之移动。这就能保持直接操纵的假象。小指示器也提供反馈，表明计算机正在记录他的动作。

1.4.2 给用户反馈

我会想，用户界面只需让人感觉快，而无需真的快。只需及时响应——立即响应用户，让他知道有反应了。我最喜欢的例子是TiVo。不是我现在的高清电视，而是在1999年发售的TiVo。那个电视盒有一个54 MHz的CPU和仅有的16 MB的RAM。虽然TiVo有特殊的硬件对视频编解码，但从用户点击一个影片到开始播放可能还是需要一段相当长的时间。TiVo的投诉有很多，但从来没有人抱怨它的速度慢。这是因为TiVo有用户熟悉的哔嘣声。

当用户点击一个影片时，能立即听到声音。我不知道工程师花费了多少时间才确保声音出现的及时性，这恰恰就是高明的地方。声音让用户能立即知道机器已经收到了他的请求。

在网页的用户界面上，这种及时的反馈是同样重要的。对于桌面电脑的网页，大多数人和设备的交互是分离的：单击后对应的效果出现。对于触摸界面，许多交互是连续的，因为它们是手势交互。当用户在屏幕上用手势操作时，不能等到手势完毕再做反馈，因为根据用户的理解，它们甚至会认为手势没有生效！

我们来谈谈滑动。滑动是指在屏幕上移动手指来执行一些操作。理想的情况下，界面元素应该随着用户的滑动而移动。如果是在页面之间滑动，整个页面应该随着手指移动。如果界面不动，那么在滑动结束之前，就无法知道到底发生了什么。没有反馈的滑动手势会像一个键盘，在你输入一个字母之前，它不会有任何反馈。手势不能等到完成时才反馈。为了让界面感觉反应迅速，还必须是连续的反馈，当用户的手指移动的时候，界面也应该移动。

如果用户在用手势操作，即使在操作完毕时，界面也必须跟着移动。如果界面在手势操作时中途停止移动了，就感觉像死机了一样。

例如，如果你创建了一组幻灯片，用户可以在幻灯片之间滑动，当用户到达最后一张幻灯片时，你不会希望手势响应停止，用户会以为界面卡死了。而是让用户继续滑动，当用户松手时，应该快速地将上一张弹回。用户得到了她的手势已经被机器接收到的反馈，只是幻灯片已经放完了。这是苹果如此严重地依赖在手势结束时的“迅速弹回”的原因。这是告知用户已经到了最后，而又不破坏手势意义的唯一办法。

规范

每个用户界面有它的规范。在桌面上有窗口、按钮、滚动条、关闭框。在移动界面，有一组新的规范。先行者苹果创建了两套UI规范。

你不需要一切都与原生的iOS应用程序完全一样。但知道一些手势和元素在移动领域的意义十分重要：不要使用滑动手势来表示选择，因为原生应用程序中这表示删除。不要更改操作系统通常会保留的手势（比如按下并保持一段时间表示呼出内容菜单，双指捏紧为缩小，双击为放大），除非你重新实现相同的基本功能。（你会在第10章中了解更多有关“滚动和滑动”的知识，在第11章中了解更多有关“双指缩放和其他的复杂的手势”的知识。）1.5 总结

触摸设备总体上在不断变化，大部分Web浏览器之间的差异是很小的。虽然在性能上的差异较大，但只用HTML5就足以在触摸设备上做出优秀的用户界面。

鉴于触摸设备的性质，速度快是至关重要的。为了让它看起来更快，最重要的是要及时反馈用户。第2章创建一个简单的内容型网站

内容型网站组成了Internet的很大一部分。毕竟，网站就是为了浏览文本而建立的，人们在网上做的最多的事情就是阅读文字。内容型网站在触摸设备上保持良好的体验固然很重要，但实际上它们还不够好。

在本章中，我们将为客户——Awesome鸟类基金会，建立一个关于加州鸟类的网站。鉴于人们普遍无法在家中观赏鸟类，我们网站目标就是通过移动设备和桌面电脑，使之成为可能。客户想让数以百万计的网站文章被链接到Twitter上，用户通过单击即可阅读关于鸟类的精彩文章。我们不希望读者在网站加载完成之前流失，必须争分夺秒。在对服务器端进行一切优化之后，还需要网页能尽快加载。

显然，网站在高延迟的3G网络下的加载速度会比在办公室的100MB的宽带网络下慢。但是，一旦开始接收数据，就必须立刻吸引住用户。我们将从基本要素开始制作这个网站：文档对象模型（DOM）和层叠样式表（CSS）。

设计师给了我们两个模拟样式图：一个桌面版本（图2.1）和一个移动版本（图2.2）。图2.1 加州鸟类网站的桌面版样式图图2.2 加州鸟类网站的移动版样式图

我们来看这些模拟的样式图。很明显，开发这个网站的难度不大。但不要忘了，此网站要在移动设备和桌面设备上都能使用。作为开发者，我们喜欢尽可能地减少代码量，因为我们知道，写的所有代码都要自己维护。同时，我们还希望网站在任何屏幕上的体验都是最好的。

理想的情况下，我们只写一次代码就可以用在所有的设备上。在许多情况下，我们完全可以利用CSS3的新特性——媒体查询来避免分支。如同我们在第1章“移动设备概述”中讨论的，移动设备与桌面设备相比，性能还有一定差距。一些美好但复杂的交互，在桌面设备上可以良好地运行，在比较差的移动设备上可能会卡死。对每种情况单独处理是有必要的。但作为一般规则，简单的内容型网站应该能在桌面设备和移动设备上共用一些代码。加州鸟类网站就是一个完美的例子。2.1 选择一个观念：移动优先或置后

短语“移动优先”是指在Web开发中的几个趋势。它是一个设计理念，一个开发方式，也是一个构建CSS的方法。

这种设计理念仅仅是一个观念，即首先针对移动设备设计，然后通过调整使它适应桌面设备。因为本书不讲设计，所以我将这部分留给其他更有资格的人来讲（Luke Wroblewski的书《Mobile First》是一部伟大的开山之作）。开发方式是一个类似的观点：先为移动设备编写代码，然后再适应桌面设备。在实践中，一个交互复杂的移动网站，肯定会与桌面网站的运行方式截然不同，因此会产生大量的不能共用的代码。这没有什么不好，只是我不认为它能节省时间。

真正的移动优先，对于大多数生产环境的网站而言还为时过早，因为Internet Explorer 8不支持媒体查询。（我们会在本章后面的部分详细地探讨媒体查询）。对于这个网站，我们会使用一些HTML5标签。这意味着，为了正确地支持IE浏览器，需要做一些额外的工作，或引入一个库，比如Modernizr。本书不是关于如何支持IE浏览器的，所以我不打算涉及这一点，但在实际生产中，支持移动设备和桌面设备的网站，就必须支持IE8。2.2 创建标记

[1]

对于这个网站，我们会用“移动置后”的方案来编写，但我们会在移动版和桌面版上使用相同的标记。我们将专注于语义标记，因为网站需要在移动设备上工作，所以我们还得考虑DOM和CSS的性能。

注:“移动置后”的缺点之一是移动设备需要下载和解析所有的桌面样式。如果采用“移动优先”，那么移动设备可以安全地忽略那些不需要的样式。另外，这是一个需要逐一分析的问题。

为一个文档创建标记时，我把它分成区域，这样不仅有合理的语义，而且在设计和添加样式时也很方便。对于加州鸟类站点，我把导航链接放置于一个

标记文档如代码清单2.1所示。

代码清单2.1 页面body部分的标记

Birds of California!

→ href="/california-condor">California Condor

California Gull

Photo By C.L.

Maclay

Lorem ipsum dolor...

→ All Rights Reserved

你会发现，有不少看似多余的class。例如，导航链接

1．当代码量变大时，class会更容易管理。使用nav-li比使用选择器“nav ul li”更简洁、更干脆、更容易进一步开发。

2．由于网站要能在世界上最慢的免费的Android手机上运行，当涉及CSS选择器的性能时，我们需要非常挑剔，也就是说要避免使用后代选择器。

一个直接的反面例子，浏览器解析CSS选择器是从右往左的。这意味着，如果它看到一个如“nav ul li a”的规则时，它首先必须获得所有匹配a的元素列表，然后检查看它是不是li的后代，再按相同规则继续检查。后代选择器虽然看起来方便，但它的性能开销是最大的。2.3 奠定基础的标签

代码清单2.2展示了加州鸟类网站的head标签

HTTP-EQUIV 元信息

http-equiv 元信息告诉浏览器如何去做，等效于设置了HTTP 报头。这让你可以向浏览器传达一些原本由服务器告诉它的内容。当你不能控制服务器时，它特别有用。例如，如果你想设置一个缓存头，但又不能控制服务器，你可以使用http-equiv属性：

.

请注意，服务器报头的优先级高，所以只能设置或取消某一报头项，不能覆盖服务器的报头项。

代码清单 2.2 标签

media="screen" charset="utf-8">

→ charset="utf-8">

我从HTML5的doctype开始，然后指定字符集为UTF-8。指定字符集很重要，这不仅能确保文档显示正确，也可以避免可能的UTF-7字符集的安全漏洞。通常情况下，服务器会发送一个Content-Type 的报头，但为了以防万一，我也同时在HTML中指定它。

我用了一个http-equiv属性设置非标准的“X-UA-Compatible”报头。它的值是chrome=1和IE= edge，如果IE用户安装了Chrome Frame插件，则可以使用这个插件；如果没有安装，则使用IE浏览器最新、最好的引擎呈现，而不是以传统模式呈现。

下一个元信息称为viewport。它目前仅用于触摸设备，将它设置正确是非常重要的。2.4 理解 Viewport

在iPhone诞生之前，手机浏览器尝试通过调整内容来适应网页，取得了不同程度的成功。iPhone上的Safari没有做丝毫的尝试，取而代之的是在各种各样的虚拟窗口上展现网页，这些虚拟窗口被称为“视图”。用户可以通过放大来查看网页的部分内容或通过缩小来查看网页的全部内容。

为了给开发者提供一定程度的展现页面的控制权，苹果公司提供了viewport的元信息（meta）元素，它可以指定虚拟窗口大小。它改变了网站建设的很多方面。理解viewport是成功建设移动网站的第一步。

虚拟像素

作为网站开发者，我们喜欢像素。在网页上进行布局，最精确和最简单的方式就是使用像素。像素是屏幕上最小的单元，一旦指定了像素值就能确切地知道它的大小。如果你拿出显微镜，可以在屏幕上一个一个地数出这些像素点。

在移动设备的屏幕上看到的像素与桌面设备上不同。这意味着，在iPhone上，无法拿出显微镜来验证一个元素是否是300px宽。在一个没有viewport 元信息的页面上，视图会默认设定宽度为980px，则宽度为300px的元素表示的宽度为300虚拟像素宽（图2.3）。

举个例子，如果声明

那么一个在CSS中被定义宽度为600px的元素在页面加载初始化时将会横向充满屏幕（图2.4）直到用户通过双击放大时才变得更大。图2.3 一个宽度600px的正方形在viewport的宽度为默认值的页面中的展现样式图2.4 一个宽度600px的正方形在viewport的宽度为600px的页面中的展现样式

PX与EM

虽然在CSS2和CSS3的规范中定义了许多单位，但是大多数开发人员限制自己只使用两个：em和px。1个单位的em总是代表当前的字体大小。如果字体大小是12px，那么1em就等于12px。1个单位的px（历史上）是屏幕上的一个像素。2005年左右，使用em变得非常流行，因为当时流行的浏览器有了改变字体大小的能力。因为单位em的定义是基于字体大小的，所以可以很容易地进行布局，以适应用户选定的字体大小。

自IE7开始，浏览器的默认缩放为全页面缩放，而不是只改变字体大小。由于简单，px现在已是设计师们最流行的选择。px更容易沟通，更容易理解。像em和其他未被充分利用的单位也有相应的用途，它们主要用于排版，而不是布局，px才是用来对网页进行布局的最简单的单位。

viewport就是一个虚拟的窗口，viewport的边缘代替浏览器的边缘，成为了窗口的边缘。

viewport的宽度和高度除了可以用像素值，还可以接受两个关键字：设备宽度和设备高度，这显然是根据设备屏幕的像素（图2.5）返回实际的尺寸。图2.5 一个 600px 的正方形在 viewport 的宽度为设备宽度，即320px的页面中可能的展现样式[2]表2.1 viewport属性（在安卓2.2+、iOS1.0+、Firefox移动版1.1+中被支持）

加州鸟类网站的viewport宽度会被设置为与设备的宽度相同，从设计的角度，这样看起来方便。此外，当我们要确保CSS适应不同的设备时，也会有很大帮助。从iPhone 1到4S（假设在垂直方向），device-width的值都是320px。

高密度显示屏

从iPhone和viewport 标签出现之后，每一代移动设备的分辨率都在增加。现在像素太高，实际像素小到即使用显微镜都难以分辨。如果规范没有改变，当网页的viewport宽度设置为设备宽度时，出现非常微小的用户界面。在iPhone 4中，即第一个有着高密度显示屏的设备上，这些元素相对它们在老版本的iPhone上只有一半大小。

此外，苹果公司是第一个将高密度显示屏设备推向市场的制造商。为了让Web开发者的思维保持清晰，苹果公司决定继续在iPhone 4上返回320的设备宽度，尽管屏幕物理像素为640。安卓设备也如法炮制。这些设备更复杂，因为在如何显示上，它们给了用户更多的控制权。（安卓上的Chrome有一个不是很有用的target-density dpi的viewport属性来支持它，你可以查看安卓开发者文档来获取更多的相关信息）。所有的设备都将返回一个设备开发者认为是布局界面元素的理想尺寸的值作为device-width。值有很大不同，所以当我们为一个viewport宽度为设备宽度的Web页面的布局时，我们需要确保布局方式可以处理一些伸缩问题，就像一个传统桌面网站的流式布局一样。

这对加州鸟类网站意味着什么呢？因为设计师为我们提供了优美且充满整个视窗的移动布局，我们可以这样设置device-width：

在大多数情况下，这样设置是最好的，因为它允许界面完全适应用户的设备，我们就不必担心网页的宽度会超过设备的宽度。2.5 响应式的CSS

在本书的配套网站，touch-interfaces.com上，你可以下载两个CSS文件：

■ Eric Meyer的reset.css文件。里面有几个用于“重置”的CSS样式。我强烈推荐使用它，因为从“重置”后完全清洁的环境开始，要优于不停地尝试修改兼容浏览器默认的样式。

■ 样式表（birds.css）是加州鸟类网站专有的。birds.css由桌面版样式开始。你可能会认出这是一个非常简单的两栏流动布局。桌面版的内容区域是流动的，而包含导航按钮的侧边栏是固定的。

代码清单 2.3展示了这些基本的样式。

代码清单2.3 基本样式

html {

background: #fff;

color: #000;

}

a {

color: green;

text-decoration: none;

}

p {

margin-bottom: 10px;

}

h2 {

font-size: 20px;

margin: 4px;

}

i {

font-style: italic;

}

.container {

padding: 0 50px;

}

.bd {

font-family: Helvetica, "Helvetica Neue", Arial, sans-serif ;

}

.hero-img {

max-width: 100%;

}

.nav-li {

display: inline-block;

background: #5e49ff;

border: 3px solid #8a7bfd;

width: 120px;

margin-bottom: 10px;

}

.nav-li .nav-link {

color: #fff;

padding: 4px;

}

.header {

width: 100%;

height: 60px;

background: #000;

padding: 0;

font-size: 38px;

font-weight: bold;

}

.header .title{

color: #fff;

padding: 10px;

text-align: left;

}

/* Allow the image to grow proportionally inside its container */

.hero-shot {

width: 50%;

float: left;

margin-right: 10px;

}

.sidebar {

position: absolute;

padding: 10px;

top: 60px;

width: 150px;

}

.main {

margin: 10px 10px 10px 150px;

}

.footer {

width: 100%;

}

你可能会注意到，海鸥图像设置的max-width为100%，而封闭的容器（.hero-shot）具有相对宽度[3] 。这是创建所谓响应式图像的最简单方式。也就是说，图像会自动按比例缩放到容器（即.hero-shot）的宽度。在这种情况下图像的宽度总是文本块的宽度的一半。2

这种响应式图像技术有一个重大的缺点：用户的设备肯定要下载多余的字节。在下一章中，我们将重新审视图像的问题。

2.5.1 创建分界点

正如前面提到的，我们将在加州鸟类网站的移动版和桌面版中使用相同的HTML标记。设计上是基于这一点的，布局和设计都会调整，以适应用户的设备的大小。为此，我们可以创建分界点：宽度的像素值不同会触发样式的更改，来适应不同宽度的屏幕。对于加州鸟类网站，我们将创建两个分界点：平板电脑为800px，手机为480px。

也就是说，如果屏幕宽度是801px或以上，我们将应用样式表中的默认样式。我们将为屏幕宽度在481px到800px之间的平板电脑创建特殊的样式，为屏幕宽度为480px或更窄的手机创建额外的样式。

如果你以前从未这样做过，改变样式以适应屏幕宽度的想法听起来很可怕。值得庆幸的是，媒体查询（media queries）使人们可以创造出一个能自适应的样式，而不必使用JavaScript。

媒体查询

由于CSS2已被广泛的支持，开发者已经能够通过在link标签上设置不同的媒体查询值，来为不同的多媒体设备提供不同的样式表。通常情况下这个值都被用于规定一个单独的“打印”样式表，例如：

CSS3提供了更强大的语法，让你可以根据更多的条件过滤样式表，而不是只能根据媒体类型来过滤。媒体查询由一个媒介类型和其他表达式组成。解析后，媒体查询最终的结果是真或假。如果为真，则应用样式表。

媒体查询可以由一个布尔运算符开始。用“not”开始的话，会将字段最后解析出的结果取反，就像在JavaScript中使用“!”一样。最常见的，你可以用only操作符来开始。由于旧的浏览器无法解析only操作符，就可以有效地在旧浏览器上屏蔽掉只应用于现代浏览器的样式表。

接下来就是媒体类型了。在 CSS 2.1 规范中，有十个媒体类型，但只有 print 和screen被各浏览器广泛支持。在媒体类型后面，你可以指定一个表达式。对于加州鸟类网站，我们将根据屏幕宽度来改变样式。宽度特征可以采用任何有效的CSS单位（用任何CSS单位来指定）来达到过滤的目的。

例如，下面这条规则限制只有比较窄的屏幕才可应用该样式表：

→ href="phone-styles.css">

下面这条规则限制只有比较宽的屏幕才可应用该样式表：

→ href="phone-styles.css">

对于加州鸟类网站，我们用媒体查询来定义不同分支。因此，有

试读结束[说明：试读内容隐藏了图片]

下载完整电子书