《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台。全书共分10章,从移动Web、设备端配置和优化,变互、响应式设计、设备访问,调试、性能测试、富媒体等角度出发,包含了60多个实用的示倒,详细阐释如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、WindowsPhone和BlackBerry等众多主流移动应用平台。  

  当前,手机设备发展迅猛、屏幕尺寸各不相同、存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能、响应式的移动网站,是Web开发者所要面对的首要挑战。HTML5以及移动网站都是很有前景的技术,本身也仍在不断的演进。移动端Safari浏览器是当前最常用的iPhone应用,它使开发人员可以创建高性能的网页应用并提高用户的浏览体验。移动网站的好处在于,你不需要申请开发者账号就可以运营和维护,不需要通过任何应用市场的审核就发布,不需要通过繁琐的审核就可以在任何时候更新。但是它也有许多问题,比如,浏览器的不一致;相对于原生应用缺少某些功能和安全性。

 

  在接下来的学习中会注于6种最流行的移动设备,特别是iPhone、Android、Windows Phone:

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

iOS、Android、Windows Mobile、Blackberry v6.0上、Symbian 60、Palm webOS;两种跨设备的浏览器:Opera Mobile、Firefox Mobile。

 图片 1

  一、确定网站的适用移动设备

教程地址:HTML5移动Web开发实战 PDF扫描版​

  当你创建一个移动网站,你必须思考以下类似的问题:

 

  1.用户最常用的平台和浏览器是什么?

 

  你必须首先确定谁是你的目标用户,他们会使用什么移动设备来访问你的网站。有许多分析工具可以帮助你回答这些问题,例如Google Analytics。你可以免费注册Google Analytics的账号: Analytics的方法非常简单,你需要做的只是从Google Analytics网站引入一小段JavaScript嵌入到你的网站中。大部分现代智能手机都支持JavaScript,所以在移动网站中使用它与在桌面网站中没有不同。

HTML5移动Web开发实战 目录:

  2.有多少用户使用支持现代脚本的移动设备?

第1章 HTML5与移动网站 

  也许你想知道有多少人使用移动浏览器访问你的网站,同时你也想知道有多少人使用完全不支持JavaScript的老旧移动浏览器。因为如果使用低端智能手机的人多于使用高端智能手机的人,那么就不值得以HTML5作为核心技术了(虽然这种可能性很低)。这时Google Analytics移动版可以派上用场。你可以在这里下载脚本: Analytics移动版服务器端程序包当前支持JSP、ASPX、Perl以及PHP。

1.1 简介 

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

1.2 确定网站的适用移动设备 

  3.应该在哪些设备和模拟器上测试?

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

  先确定需要支持的核心移动设备,再看看如何配置。我们的目标是最大化覆盖率和最小化成本,虽然所有的设备都有模拟器,但他们并不支持所以的平台。如图:

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

图片 2

1.2.3 Google Analytics的替代品 

  Google Analytics不是市场上唯一的移动数据分析服务商,还有其他的服务商提供更有针对性的服务,比如PercentMobile提供一个帮助分析你的移动用户群和网站价值的移动数据分析服务。移动设备报告的位置并不总是精确的,Google Analytics的Map Overlay报告以用户的IP地址来确定用户的位置。由于移动设备的IP来源于无线网关,它不需要也不知道移动用户的准确位置,所以些许不准确也是可以接受的。  

1.2.4 Google Analytics的精准度 

  对于服务端读取速度的担忧:

1.2.5 对服务端读取速度的担忧 

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

1.3 配置移动开发工具 

  下面是用于网页设计和测试的主流移动设备模拟器下载表:

1.3.1 准备 

图片 3

1.3.2 实践 

  针对跨平台浏览器的工具,特别是Opera和Firefox。浏览器的模拟器下载表:

1.3.3 回顾 

图片 4

1.3.4 延伸 

  BlackBerry**仿真器**(这里不做过多介绍)

1.4 BlackBerry仿真器 

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

1.4.1 准备 

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

1.4.2 实践 

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

1.5 配置移动开发环境 

  Fritman搜索的仿真器、模拟器:

1.5.1 准备 

  Maximmiliano Fritman,一个移动网站开发人员和作家,他维护了一个仿真器列表:

1.5.2 实践 

1.5.3 回顾 

1.5.4 延伸 

1.6 在移动网站中使用HTML5 

1.6.1 准备 

1.6.2 实践 

1.6.3 回顾 

1.6.4 延伸 

1.7 跨浏览器HTML5 

1.7.1 准备 

1.7.2 实践 

1.7.3 回顾 

1.7.4 延伸 

1.8 移动设计 

1.8.1 准备 

1.8.2 实践 

1.8.3 回顾 

1.8.4 延伸 

1.9 定义一个内容策略 

1.9.1 准备 

1.9.2 实践 

1.9.3 回顾 

1.9.4 延伸 

第2章 移动端的配置和优化 

2.1 简介 

2.2 通过界面图标启动Web应用 

2.2.1 准备 

2.2.2 实践 

2.2.3 回顾 

2.2.4 延伸 

2.2.5 参考 

2.3 避免文本字体大小重置 

2.3.1 准备 

2.3.2 实践 

2.3.3 回顾 

2.3.4 延伸 

2.4 优化浏览器视口宽度设置 

2.4.1 准备 

2.4.2 实践 

2.4.3 回顾 

2.4.4 延伸 

2.5 修复移动版Safari的re-flow scale问题 

2.5.1 准备 

2.5.2 实践 

2.5.3 回顾 

2.5.4 延伸 

2.6 在浏览器中启动手机原生应用 

2.6.1 准备 

2.6.2 实践 

2.6.3 回顾 

2.6.4 延伸 

2.7 iPhone下全屏模式启动 

2.7.1 准备 

2.7.2 实践 

2.7.3 回顾 

2.7.4 延伸 

2.8 防止iOS在聚焦时自动缩放 

2.8.1 准备 

2.8.2 实践 

2.8.3 回顾 

2.8.4 延伸 

2.9 禁用或限制部分WebKit特性 

2.9.1 准备 

2.9.2 实践 

2.9.3 回顾 

2.9.4 延伸 

第3章 移动设备的交互方式 

3.1 简介 

3.2 利用触控来移动页面元素 

3.2.1 准备 

3.2.2 实践 

3.2.3 回顾 

3.2.4 延伸 

3.2.5 参考 

3.3 检测和处理横竖屏切换事件 

3.3.1 准备 

3.3.2 实践 

3.3.3 回顾 

3.3.4 延伸 

3.3.5 参考 

3.4 利用手势旋转页面元素 

3.4.1 准备 

3.4.2 实践 

3.4.3 回顾 

3.4.4 延伸 

3.4.5 参考 

3.5 利用滑动创建图库 

3.5.1 准备 

3.5.2 实践 

3.5.3 回顾 

3.5.4 延伸 

3.5.5 参考 

3.6 利用手势操作图片缩放 

3.6.1 准备 

3.6.2 实践 

3.6.3 回顾 

3.6.4 延伸 

3.6.5 参考 

第4章 构建快速响应式移动互联网站点 

4.1 简介 

4.2 使用HTML5语法构建页面 

4.2.1 准备 

4.2.2 实践 

4.2.3 回顾 

4.2.4 延伸 

4.2.5 参考 

4.3 使用CSS3特性做渐进增强 

4.3.1 准备 

4.3.2 实践 

4.3.3 回顾 

4.3.4 延伸 

4.3.5 参考 

4.4 使用响应式设计 

4.4.1 准备 

4.4.2 实践 

4.4.3 回顾 

4.4.4 延伸 

4.5 优化polyfills脚本的加载速度 

4.5.1 准备 

4.5.2 实践 

4.5.3 回顾 

4.5.4 延伸 

4.5.5 参考 

4.6 检测用户客户端 

4.6.1 准备 

4.6.2 实践 

4.6.3 回顾 

4.6.4 延伸 

4.7 使用书签气泡为应用添加桌面快捷方式 

4.7.1 准备 

4.7.2 实践 

4.7.3 回顾 

4.7.4 参考 

4.8 构建可自动伸缩的文本输入框 

4.8.1 准备 

4.8.2 实践 

4.8.3 回顾 

4.8.4 延伸 

4.8.5 参考 

4.9 加速按钮反馈 

4.9.1 准备 

4.9.2 实践 

4.9.3 回顾 

4.9.4 延伸 

4.9.5 参考 

4.10 隐藏浏览器的地址栏 

4.10.1 准备 

4.10.2 实践 

4.10.3 回顾 

4.10.4 参考 

4.11 构建移动互联网站点的站点地图 

4.11.1 准备 

4.11.2 实践 

4.11.3 回顾 

4.11.4 延伸 

第5章 移动设备访问 

5.1 简介 

5.2 获取位置信息 

5.2.1 准备 

5.2.2 实践 

5.2.3 回顾 

5.2.4 延伸 

5.3 跨浏览器定位 

5.3.1 准备 

5.3.2 实践 

5.3.3 回顾 

5.3.4 延伸 

5.4 基于地理信息显示地图 

5.4.1 准备 

5.4.2 实践 

5.4.3 回顾 

5.4.4 延伸 

5.5 实时显示地理位置 

5.5.1 准备 

5.5.2 实践 

5.5.3 回顾 

5.6 使用DeviceOrientation事件 

5.6.1 准备 

5.6.2 实践 

5.6.3 回顾 

5.6.4 延伸 

5.7 使用foursquare的定位 

5.7.1 准备 

5.7.2 实践 

5.7.3 回顾 

5.7.4 延伸 

第6章 移动富媒体 

6.1 简介 

6.2 移动设备上播放音频 

6.2.1 准备 

6.2.2 实践 

6.2.3 回顾 

6.2.4 延伸 

6.3 移动设备上播放视频 

6.3.1 准备 

6.3.2 实践 

6.3.3 回顾 

6.3.4 延伸 

6.4 使用离线缓存 

6.4.1 准备 

6.4.2 实践 

6.4.3 回顾 

6.4.4 延伸 

6.5 使用网络存储(Web Storage) 

6.5.1 准备 

6.5.2 实践 

6.5.3 回顾 

6.5.4 延伸 

6.6 使用Web Workers 

6.6.1 准备 

6.6.2 实践 

6.6.3 回顾 

6.7 使用session和history API构建类Flash导航效果 

6.7.1 准备 

6.7.2 实践 

6.7.3 回顾 

6.7.4 延伸 

第7章 移动设备调试 

7.1 简介 

7.2 使用Opera Dragonfly远程调试 

7.2.1 准备 

7.2.2 实践 

7.2.3 回顾 

7.2.4 延伸 

7.3 使用weinre远程调试 

7.3.1 准备 

7.3.2 实践 

7.3.3 回顾 

7.4 在移动设备上使用Firebug 

7.4.1 准备 

7.4.2 实践 

7.4.3 回顾 

7.4.4 延伸 

7.5 使用JS Console远程调试 

7.5.1 准备 

7.5.2 实践 

7.5.3 回顾 

7.5.4 延伸 

7.6 设置移动Safari调试器 

7.6.1 准备 

7.6.2 实践 

7.6.3 回顾 

第8章 服务器端性能调优 

8.1 简介 

8.2 防止移动设备转码(Mobile Transcoding) 

8.2.1 准备 

8.2.2 实践 

8.2.3 回顾 

8.2.4 延伸 

8.3 添加移动设备支持的MIME类型 

8.3.1 准备 

8.3.2 实践 

8.3.3 回顾 

8.3.4 延伸 

8.4 正确显示cache manifest文件 

8.4.1 准备 

8.4.2 实践 

8.4.3 回顾 

8.5 在头文件设置未来过期时间 

8.5.1 准备 

8.5.2 实践 

8.5.3 回顾 

8.5.4 延伸 

8.6 使用Gzip压缩 

8.6.1 准备 

8.6.2 实践 

8.6.3 回顾 

8.6.4 延伸 

8.7 移除ETags 

8.7.1 准备 

8.7.2 实践 

8.7.3 回顾 

8.7.4 延伸 

第9章 移动性能测试 

9.1 简介 

9.2 使用Blaze的移动设备速度测试 

9.2.1 准备 

9.2.2 实践 

9.2.3 回顾 

9.2.4 延伸 

9.3 在线分析移动页面速度 

9.3.1 准备 

9.3.2 实践 

9.3.3 回顾 

9.3.4 延伸 

9.4 PCAP网站性能分析 

9.4.1 准备 

9.4.2 实践 

9.4.3 回顾 

9.4.4 延伸 

9.5 移动版HTTP Archive 

9.5.1 准备 

9.5.2 实践 

9.5.3 回顾 

9.5.4 延伸 

9.6 使用Jdrop存储性能数据 

9.6.1 准备 

9.6.2 实践 

9.6.3 回顾 

9.6.4 延伸 

第10章 拥抱移动互联网特性 

10.1 简介 

10.2 window.onerror 

10.2.1 准备 

10.2.2 实践 

10.2.3 回顾 

10.2.4 延伸 

10.3 使用ECMAScript 5中的新方法 

10.3.1 准备 

10.3.2 实践 

10.3.3 回顾 

10.3.4 延伸 

10.4 HTML5中新的输入类型 

10.4.1 准备 

10.4.2 实践 

10.4.3 回顾 

10.4.4 延伸 

10.5 在HTML中内嵌SVG 

10.5.1 准备 

10.5.2 实践 

10.5.3 回顾 

10.5.4 延伸 

10.6 position:fixed 

10.6.1 准备 

10.6.2 实践 

10.6.3 回顾 

10.7 overflow:scroll 

10.7.1 准备 

10.7.2 实践 

10.7.3 回顾 

10.7.4 延伸