HTML5移动Web开发实战

当今，移动应用开发掀起软件行业的新一轮浪潮。然而，手机设备发展迅猛，屏幕尺寸各不相同、存储和性能仍有局限性，如何在多平台上创建高性能、响应式的移动网站，是程序员所要面对的首要挑站。

本书提供了应对这一挑战的解决方案。通过阅读本书，你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能，横跨多个移动平台。

全书共分10章，从移动Web、设备端配置和优化，变互、响应式设计、设备访问，调试、性能测试、富媒体等角度出发，包含了60多个实用的示倒，详细阐释如何构建快速、响应式的HTML5移动网站，适用于 iOS、Android、Windows Phone和BlackBerry等众多主流移动应用平台。

本书作者是HTML5 Boilerplate项目的成员，Mobile Boilerplate(http://h5bp．com/mobile)的主要开发人员。本书为那些致力于实现高性能、响应式、跨平台的HTML5移动网站的程序员量身打造，也适合对移动Web开发感兴趣的读者学习参考。

石川有超过 5 年的 Web 开发经验，他是 HTML5 Boilerplate 项目的成员，Mobile Boilerplate（http://h5bp.com/mobile）的主要开发人员，JavaScript Patterns 项目（http://shichuan.github.com/javascript-patterns）的所有人。他现在是居住在美国和中国的独立开发者，你可以在他的个人网站http://www.blog.highub.com上找到更多的信息。他爱好阅读、旅游、美食以及电子技术、Indie音乐。

我要感谢我的父母和所有家人，他们给予了我无条件的支持。我也要感谢Jiang Xue，她教会了我许多关于生活的事情，虽然她自己并不知道。

我还要感谢Boilerplate团队中的好友——Paul Irish、Divya Manian、Mathias Bynens和Nicolas Gallagher，我前公司的上一任CTO——Chi Tran。他们曾经并且以后一直都是我灵感和理想的来源。

Dale Cruse，他是波士顿地区的 Web 开发者，《HTML5 Multimedia Development Cookbook》的作者。从 1995 年开始，他就为很多高知名度的客户建立网站，从美国军方到 Bloomingdale's 都是他的客户。他是新英格兰艺术学院的特约讲师，并且现在仍从事着演讲事业，http://dalejcruse.com 有他的联系方式。他同时也是一个关于香槟的博客http://www.drinksareonme.net/的作者。

Sarah Soward，在Bay Area Video Coalition和AcademyX教授开发、设计和Adobe Creative套件。除授课外，她也在BAVC上开发了有关HTML5/CSS3、色彩理论、排版、Fireworks和Web设计流程的课程。她长年从事非盈利性组织的艺术总监工作，是《WordPress and Flash Cookbook》的合著者。不再授课以后，她仍然从事各种设计和开发工作，从商务名片到网站、画犀牛、建筑以及击鼓，直到她的双手可以保持自然的节拍。她喜欢忙碌的感觉。

刘旸：经历过各种技术和职位，最终发现前端开发才是其归宿，现为 ThoughtWorks前端程序员，专注于实践优秀的前端代码架构。同时也是ThoughtWorks UX Group一员，关注用户体验以及响应式设计、视差滚动等新兴设计元素。热衷于分享、社区活动、结交朋友。博客：zation.me。新浪微博：@Zation。

刘先宁：2008年毕业于西安交通大学软件工程学院，ThoughtWorks（成都）咨询师， ThoughtWorks Mobile Lab成员，长期从事软件研发一线工作，热爱互联网，喜欢各种新技术，喜欢分享、讨论。喜欢户外运动。新浪微博：@xianlinbox。

如何在多平台上创建高性能、响应式移动网站？对于程序员来说，由于手机设备快速增加、屏幕尺寸各不相同、性能仍有局限性，这个问题就显得非常重要。本书提供了答案，你会知道如何有效地利用最新的HTML5针对移动网站的功能，横跨多个移动平台。

本书会让你了解如何策划、创建、调试和优化移动网站。在引入新兴的移动网站功能时，使用最新的HTML5是最好的选择。

本书展望了许多有潜力的移动网站技术和知识：移动用户的交互方式以及创建一个可靠的移动版HTML模板；创建高性能、响应式的网站，并且合理地引入独特的移动地理位置功能和富媒体；完美地进行调试，优化性能以及调整服务端。

第1章：HTML5与移动网站，介绍HTML5和移动网站基本概念，包括一些模拟器和仿真器。

第2章：移动端的配置和优化，讨论针对多种移动设备的配置和优化，例如禁用文字缩放和优化可视宽度。

第3章：移动设备的交互方式，讨论了手势事件等移动交互。

第4章：构建快速响应式移动互联网站点，介绍了各种构建快速响应式网站的方法。

第5章：移动设备访问，讨论了基于地理位置的移动网站和其他HTML5针对设备的功能。

第6章：移动富媒体，介绍了可用于移动浏览器的HTML5富媒体元素。

第7章：移动设备调试，讲解了如何在移动设备屏幕尺寸的限制下有效地调试移动网站和应用。

第8章：服务器端性能调优，关注移动网站的服务器端性能调优。

第9章：移动性能测试，讲解了各种可用于移动性能调优的工具和技术。

第10章：拥抱移动互联网特性，讲解了ECMAScript5等一些针对移动设备的功能及性能优化。

本书大部分内容只需要一个文本编辑器，以及一个移动设备，例如：iPhone、Android、Blackberry 或者其他适合测试的设备。虽然在真实设备上测试是最完美的，但是如果没有也不用担心，本书会详细介绍如何使用仿真器和模拟器。

创建HTML5移动网站并且致力于实现高性能、响应式、跨平台的程序员。

本书使用多种不同的文字来区分不同的信息，下面是一些示例及解释：

文本中的代码：“geolocation是navigator对象的新属性。”

对于重要的代码段，我们会将相关的部分加粗：

新的术语和重要文字会加粗，菜单或对话框之类屏幕上的文字，会这样显示：“单击捕获选项对话框中的开始按钮来开始捕获。”

欢迎读者的任何反馈、看法（哪些喜欢，哪些不喜欢），这非常重要，我们会根据这些写出真正对读者有用的内容。

任何反馈都可以发送邮件至feedback@packtpub.com，并在标题中包含书名。

如果你希望我们出版某书，请在www.packtpub.com的SUGGEST A TITLE提交，或是发送邮件至suggest@packtpub.com。

如果你对某个方面有专业的意见，或是希望参与、写作一本书，请参考作者向导：www.packtpub.com/authors

在拥有Packt图书后，我们还提供多种服务。

下载示例代码

使用你的账号在 http://www.PacktPub.com 下载所有已购买书籍的示例代码，如果你是以其他方式购买的，请访问http://www.PacktPub.com/support并注册，代码文件会由邮件发送。

虽然我们努力保证内容的准确，但错误是难免的。如果你找到任何错误（文本中的或代码中的）并报告，我们会非常感谢，这样可以避免误导其他读者，也可以改进该书的后续版本。报告勘误，可以访问 http://www.packtpub.com/support，选择图书，单击 errata submission form连接，输入详细的勘误信息。一旦勘误通过验证，我们将会进行修改并且将勘误显示在网站上或是勘误信息的列表中，任何的勘误都可以在 http://www. packtpub.com/support通过标题搜索。

盗版在互联网中是一个不断发生的问题，Packt对版权有非常严谨的保护。如果发现任何形式的盗版，请提供地址或网站名，我们将采取维权行动。

如果有关于本书的任何问题，请联系 questions@packtpub.com，我们将会努力为你解决。

本章内容包括：

◆ 准备好你的移动设备

◆ 仿真器与模拟器

◆ 搭建移动开发环境

◆ 在移动网站中使用HTML5

◆ 跨浏览器兼容HTML5

◆ 适用于移动设备的设计

◆ 确定你的核心移动设备

◆ 定义一个内容策略

HTML5以及移动网站都是很有前景的技术，他们都有着相对较短的历史。本章介绍的大部分内容都是比较基础的，可以帮助你迅速、轻松地开始移动端开发。

移动网站以及 HTML5 本身仍然在不断演进，对此你肯定有很多的疑惑。我们会解开这些疑惑并告诉你应该专注在哪些真正重要的事情上。

移动网站的增长非常之快。移动端Safari浏览器是当前最常用的iPhone应用，它使开发人员可以创建高性能的网页应用并提高用户的浏览体验。移动网站的好处在于，你不需要申请开发者账号就可以运营和维护，你不需要通过任何应用市场的审核就可以发布，你不需要通过繁琐的审核就可以在任何时候更新。但它也有许多问题，比如，浏览器的不一致；相对于原生应用缺少某些功能和安全性。虽然我们不能解决所有的问题，但是肯定能解决一部分，同时我们还会看到在移动网站的开发过程中的最佳实践。

现在市场上有成千上万的智能手机，但你不需拥有所有的手机来测试你的应用，实际上你只需要不到10个。如果那仍然超出了你的预算，那么两台设备也足够了，剩下的使用模拟器、仿真器去做测试。本书专注于6种最流行的移动设备，特别是iPhone、Android、Windows Phone：

◆ Blackberry v6.0及以上

本书还会包括两种跨设备的浏览器：

在本书讨论的一些问题和技术中，我们也会涉及其他不在此列的浏览器。

适用浏览器：所有

你不可能给每个移动设备都单独做一个移动网站，没有人有这样的时间和精力。

跨浏览器的移动网站开发是非常困难的，其难点在于如何确定网站的适用范围，John Resig （jQuery Mobile 的创始人）在一个描述 jQuery Mobile 创建经历的 PPT（http://www.slideshare.net/jeresig/testing-mobile-javascript）中提了三个问题：

◆ 哪些平台和浏览器是流行的？

◆ 哪些浏览器可以支持现代脚本？

◆ 哪些设备和模拟器需要我进行测试？

当你创建一个移动网站，你必须思考类似的问题，但并不一定完全相同，因为不同的网站的目标用户不同。所以你的问题应该是：

◆ 用户最常用的平台和浏览器是什么？

◆ 有多少用户使用支持现代脚本的移动设备？

◆ 应该在哪些设备和模拟器上测试？

首先我们来回答第一个问题。在创建移动网站之前，你必须首先确定谁是你的目标用户，他们会使用什么移动设备来访问你的网站。有许多分析工具可以帮助你回答这些问题，例如 Google Analytics。你可以在这里免费注册 Google Analytics 的账号：http://www.google.com/analytics/。

使用Google Analytics的方法非常简单（大部分开发者对它并不陌生），你需要做的只是从Google Analytics网站引入一小段 JavaScript嵌入到你的网站中。

大部分现代智能手机都支持JavaScript，所以在移动网站中使用它与在桌面网站中没有不同。

我们现在来回答第二个问题。也许你想知道有多少人使用移动浏览器访问你的网站，同时你也想知道有多少人使用完全不支持 JavaScript 的老旧移动浏览器。因为如果使用低端智能手机的人多于使用高端智能手机的人，那么就不值得以HTML5作为核心技术了（虽然这种可能性很低）。

所以如果你不仅希望知道有多少人使用智能手机，同时也希望知道有多少人使用老旧的移动电话，Google Analytics移动版可以派上用场。你可以在这里下载脚本：

http://code.google.com/mobile/analytics/download.html#Downloa d_the_Google_Analytics_server_side_package

Google Analytics移动版服务器端程序包当前支持 JSP、ASPX、Perl以及PHP，让我们来看一个基于PHP的例子。你所需要做的只是修改ACCOUNT ID GOES HERE为你的GA账户ID，也记得修改“UA-xx”为“MO-xx”。

遗憾的是，当你使用服务端版本，就不能同时使用ga.js这一JavaScript跟踪代码库。放弃JavaScript版本让人很遗憾，因为JavaScript版本提供了很多服务端版本所缺乏的动态跟踪机制：

Google Analytics不是市场上唯一的移动数据分析服务商，还有其他的服务商提供更有针对性的服务，比如，PercentMobile提供一个帮助分析你的移动用户群和网站价值的移动数据分析服务。你在这里可以找到更多关于该服务的信息：

http://percentmobile.com/

移动设备报告的位置并不总是精确的，Google Analytics的Map Overlay报告以用户的IP地址来确定用户的位置。由于移动设备的IP来源于无线网关，它不需要也不知道移动用户的准确位置，所以些许不准确也是可以接受的。

基于服务端的处理方式，可能会对服务器造成额外的负担和影响，所以Google建议先在某些页面小范围测试一下，确保一切正常之后再在全站部署。

适用浏览器：所有

在前一节还剩下一个问题没有回答：我应该在哪些设备和模拟器上测试？我们会在这一节回答。

如果你决定了需要支持的核心移动设备，那么现在就可以来看看如何配置了。如果在过多移动设备上测试，那么移动开发成本会很高，虽然我们可以使用移动设备的模拟器和仿真器，但都比不上在真实设备上做测试。现在我们来看看如何最大化测试覆盖率并最小化成本。

我们会首先做一些假设，虽然具体情况可能不同，但思路是一样的。我们假设你的桌面操作系统是Windows，而大部分用户是通过iOS、Android、Blackberry来访问你的网站。

你的目标是最大化覆盖率和最小化成本，虽然所有的设备都有模拟器，但他们并不支持所有的平台。

如表1-1所示，由于iOS模拟器只运行在Mac上，如果你使用Windows操作系统，那么最好也是唯一的选择就是购买iPhone来测试。对于Android和Blackberry，因为他们都有Windows上的模拟器，你可以直接下载模拟器来节约成本。

1．列出你的用户的主要移动设备。

2．了解你用于开发的操作系统。

3．确定每个设备模拟器对于开发环境的兼容性。

如果你有资金购买多台运行于不同操作系统的移动设备，那么你可以考虑得更多一些，例如，屏幕尺寸和 DPI。也许你不需要该购买两台高端设备，例如 iPhone4 和 Android Thunderbolt^①。你可以购买一款低端 Android 设备来测试你的手机在低端设备上的样式。总的来说就是减少你的操作系统、移动设备和模拟器，让他们每个都覆盖尽可能多的使用场景。

各设备模拟器、仿真器下载表

下面的表1-2显示了用于网页设计和测试的主流移动设备模拟器。

浏览器的模拟器、仿真器下载表

除移动设备测试工具外，我们还有针对跨平台浏览器的工具，特别是Opera和Firefox，如表1-3所示。

除仿真器和模拟器之外，还有一些测试平台提供远程连接到真实设备，其中之一就是DeviceAnywhere，但问题是它并不免费。

http://www.deviceanywhere.com/

适用浏览器：BlackBerry

大部分的移动设备仿真器，都可以很容易地根据其官方网站的介绍来安装和配置，但BlackBerry 仿真器的工作方式与其他仿真器不同。从 Blackberry 仿真器连接互联网，除了下载仿真器还需要下载安装BlackBerry Email and MDS Services Simulator。

确认你从以下地址下载了仿真器：http://us.blackberry.com/developers/resources/simulators.jsp。

首先进入页面：https://swdownloads.blackberry.com/Downloads/entry. do?code=A8BAA56554F96369AB93E4F3BB068C22&CPID=OTC-SOFTWAREDOWNLOA DS&cp=OTC-SOFTWAREDOWNLOADS，你会看到类似图1-1所示的产品列表。

选择BlackBerry Email and MDS Services Simulator Package后点击Next。

为了可以连接到互联网，下载安装后必须首先启动该服务仿真器，然后再启动Blackberry仿真器。

图1-2所示就是Blackberry仿真器。

适用浏览器：所有

在开始移动网站开发之前，我们必须首先配置好开发环境。

1．配置本地网站服务。对于 Windows、Mac 和 Linux，最容易的方法是使用免费的XAMPP软件：

http://www.apachefriends.org/en/index.html

2．确认你有无线网络。

3．同时你需要一个移动设备，或者是移动设备的仿真器、模拟器。

4．确保你的移动设备和电脑在同一无线网络中。

1．在你的本地服务器根目录中创建一个HTML文件并命名为ch01e1.html，在其中输入如下代码：

2．获取你的IP地址。如果你使用的是Windows，你可以在命令行中输入如下命令：

3．当你获取到你的IP地址（如192.168.1.16），把它输入到移动浏览器的URL地址栏，然后你就可以看见页面加载成功并且显示图1-3所示的文字。

在同一个局域网中，你的移动设备可以通过IP地址访问以桌面电脑作为主机的服务器。

如果你没有移动设备，你可以使用某个仿真器来测试，但建议至少有一两个真实设备来测试。仿真器可以测试到大部分的情况，但不是所有的。

使用桌面版Safari测试

如果你的主要用户使用iPhone和移动版Safari，在桌面电脑上测试可以节约很多时间：打开Safari，在偏好设置中单击高级栏打开，在菜单栏中显示“开发”菜单，如图1-4所示。

在本页面中选择开发|用户代理|Mobile Safari 3.1.3 – iPhone：

社区搜集的仿真器、模拟器

如果你没有智能手机，也可以使用很多仿真器、模拟器，你可以在Mobile Boilerplate项目的wiki页面找到：

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulat ors-&-Simulators

Fritman搜集的仿真器、模拟器

Maximiliano Firtman，一个移动网站开发人员和作家，他维护了一个仿真器列表：

http://www.mobilexweb.com/emulators

适用浏览器：所有

现在我们开始创建一个简单的 HTML5 页面。对于有 HTML 基础的人来说，HTML5是很容易理解的。对于有网页开发基础的人来说，移动网站开发不会太难。

创建一个新文件ch01e2.html

在文件中写入以下代码：

在浏览器中打开文件，你会看到写入的文字。

HTML5 和其他 HTML 页面的唯一区别就在于我们使用的文件类型定义（ DTD ， Document Type Definition）：<!doctype html>。

Safari 会根据<meta name="viewport" content="width=device- width, initial-scale=1.0">，将页面宽度设为屏幕宽度，并且根据 initial-scale=1 禁用浏览器的缩放。

下面是HTML5的一些历史：HTML5最初有两个版本的草稿，分别由万维网联盟（W3C，World Wide Web Consortium）和网页超文本技术工作小组（WHATWG，Web Hypertext Application Technology Working Group）创建。万维网联盟本质上是以民主投票作为决策机制的一个小组，但实际效率非常迟缓。网页超文本技术工作小组是由 lan Hickson（同时也是Google的员工）和一组未公开的人员编辑，由于大部分的设计都是lan完成的，所以网页超文本技术工作小组的草稿进度快得多。

HTML5与版本号

为什么HTML5会没有版本号？这里有一些原因：

1．浏览器并不会针对 HTML 的某个版本做支持，而是针对某个功能做支持。就是说如果浏览器支持你使用的某个功能，即使你把文档申明为 HTML4，浏览器仍然会按照HTML5的标准来显示页面。

2．名字可以很简洁。

移动文档类型

使用 HTML5文档类型<!doctype html>是否是可靠的？答案是文档类型只是用作确认，而非浏览器实际显示。在怪异模式^①中是否是可靠的？<!doctype html>是浏览器按照标准工作所需要的最少的信息，所以使用<!doctype html>是非常可靠的。

^①怪异模式（quirks mode），是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性而使用的一种技术。——译者注

我们使用<!doctype html>而不是<!DOCTYPE html>，这是因为 HTML5不是大小写敏感的，但是出于一致性的考虑，本书中都将使用小写。

学习HTML5的免费资源

关于 HTML5 有许多优秀的免费书籍和文章，如果你对 HTML5 不是很熟悉，可以在下面的网站学习：

◆ HTML5 Doctor: http://html5doctor.com/

◆ Dive Into HTML5: http://diveintohtml5.org/

◆ HTML5 Rocks: http://www.html5rocks.com/

如果希望详细了解HTML5，你可以阅读官方HTML5文档。

W3C版本的文档：

http://dev.w3.org/html5/spec/Overview.html

WHATWG版本的在线标准：

http://www.whatwg.org/specs/web-apps/current-work/multipage/

适用浏览器：所有

旧浏览器无法识别 HTML5 元素，也无法对这些元素设置样式，但有许多工具可以解决这个问题，例如Modernizr。

1．Windows Mobile的自带浏览器无法识别HTML5元素，如果没有Windows Mobile，你可以使用IE7来测试，因为他们都是基于相同的浏览器引擎。

2．在此下载Modernizr：http://www.modernizr.com/，它由Faruk Ateş 、Paul Irish和Alex Sexton开发。

1．新建一个HTML文件命名为ch01e3.html，然后输入以下代码：

2．现在新建另一个文件命名为ch01e4.html，引入Modernizr，如图1-5所示。

注意如果要使用Modernizr，你需要在<head>标签中引入它。下一节还有一些其他的工具与Modernizr类似。

Modernizr不是唯一可以帮助我们跨浏览器的库，还有其他两个值得注意：

◆ html5shim，由Remy Sharp、Jonathan Neal和社区开发，对打印也同样有效。

http://code.google.com/p/html5shim/

◆ InnerShiv，由Joe Bartlett开发，支持元素的 innerHTML。

http://jdbartlett.github.com/innershiv/

下面的代码可以清除HTML5元素的默认样式：

使HTML5元素在旧版本IE中变为块级元素：

下面的代码可以使 HTML5 元素变为块级元素，但注意不是所有的 HTML5 元素都需要显示为块级元素。

下面是HTML5中的块级元素：

Modernizr不仅使HTML5元素可以被设置样式，它还可以检测HTML5各个功能在不同浏览器中的兼容性。你可以在 2.0 版本中自定义下载内容：http://www.modernizr.com/download/。

适用浏览器：所有

桌面网站的设计趋势是固定布局（flxed layout）或流体布局（fluid layout），而在移动网站中我们应该始终使用流体布局，它可以使你的网站适应不同的设备尺寸。

新建两个空白HTML文件，命名为ch01r06_a.html和ch01r06_b.html。

1．在ch01r06_a.html中输入以下代码并保存：

2．在ch01r06_b.html中输入以下代码并保存：

两个页面在纵向显示中看起来几乎一样，如图1-6所示。

现在旋转你的屏幕，看看发生了什么。

在横向显示中，第一个例子（见图1-7）两边出现了空白，而第二个例子（见图1-8）充满了整个屏幕。

第二个例子有不同的结果。

这个页面在固定布局中看起来很奇怪，但在流体布局中正常显示。所以当你在针对移动设备做设计时，始终谨记保持这种灵活性，因为：

◆ 移动设备有横向和纵向显示。

◆ 移动设备的屏幕空间很有限，所以需要利用好每个像素。

CSS媒介查询（media query）是响应式设计中很重要的部分，它帮助你实现更加灵活的移动设计。

在窄屏中，这两个 section 会纵向排列（如图 1-9 所示），而在宽屏中会横向排列，这就是CSS媒介查询的功能。在示例中，@ media screen and (min-width: 480px){..}的样式会在480px以上宽度的屏幕中启用：

在横向显示中，两块方框并列显示，如图1-10所示。

桌面优先的网站

除了创建纯粹的桌面网站或纯粹的移动网站，我们还有其他建站的方式，其中之一就是桌面优先，并在移动设备上优雅降级。

移动优先网站

另一个方式是移动优先，并在桌面设备上优雅降级。

这种方式可以使用以下CSS：

另一个方式是只创建一个网站，并兼顾移动和桌面设备，而不是只专注其中一个。

适用浏览器：所有

通过分析工具搜集到的数据，你可以定义一个内容策略，这对已经有了一个桌面网站的人是非常有用的。

确认你已经把分析工具的Javascript代码嵌入到网站中。

1．进入分析工具，在左边导航栏中点击受众群体|移动设备，如图 1-11所示。

2．现在点击设备，你可以看到人们使用什么设备浏览你的网站，如图1-12所示。

Google Analytics可以分析浏览你的网站最常用的移动设备，也可以分析你的网站最受欢迎的部分。

人们使用移动设备上网的目的与使用桌面设备上网是不同的，例如：对于一个产品销售网站，大部分用户使用移动设备常常查看联系方式、地址和服务，而使用电脑的用户常常搜索产品目录、公司简介和产品描述。Google Analytics可以分析哪个部分或页面是访问量最大的，除了Google Analytics，你也可以使用我们早前发现的PercentMobile，如图1-13所示。

使用分析工具是决定支持哪些浏览器的方法之一，另一种是依据浏览器分级。jQuery Mobile 有一个很好的浏览器支持表：http://jquerymobile.com/gbs/，同时还有一个 jQuery Mobile的ppt讨论了所有移动网站开发策略：http://www.slideshare.net/ jeresig/testing- mobile-javascript。