描述
开 本: 16开纸 张: 胶版纸包 装: 平装是否套装: 否国际标准书号ISBN: 9787121258213
√ 本书彻底厘清移动Web开发与传统PC网站开发的本质区别
√ 是前端大神PPK八年潜心研究移动Web及大量浏览器的成果总结
√ 通过移动端对前端开发的种种挑战及相应对策，细致剖析解决思路
√ 以专业视角系统梳理前端在移动平台上的知识、技能，及开发原理、手段
√ 操作系统、浏览器、机型适配、视口、CSS特性、触屏事件、开发者装备，一应俱全
√ 从前端走向终端必不可少的大纲，告诉你哪些是移动前端真正要用的，打好基础才能明确方向
移动价值链 ….3
运营商 …………5
网络供应商 ………………………….6
运营商补贴 ………………………….6
补贴还是不补贴 ……………………8
开发者和消费者心理份额 ……….9
设备供应商和硬件 ……………………………………….10
跟随一部手机 …………………….10
什么是智能手机 ………………….12
全球设备市场 …………………….13
寻找合适的统计 ………………….14
智能手机销售市场份额 …………16
操作系统销售市场份额 …………17
操作系统使用量 ………………….19
设备市场的变化 ………………….20
操作系统厂商和软件 ……………………………………22
现存操作系统 …………………….23
挑战者 ………………………………24
Web作为操作系统 ……………….25
第2章 浏览器. ………………………… 27
浏览器类型 ..30
内置浏览器 ………………………..30
可下载浏览器 …………………….31
WebView…………………………..32
代理浏览器 ..32
优势：便宜 ………………………..34
缺点：没有客户端交互 …………35
在代理浏览器上开发 ……………35
混合浏览器 ………………………..36
iOS浏览器的情况 …………………………………………37
其他平台的浏览器的情况 ……..38
渲染引擎 ……38
手机上没有WebKit ………………39
用浏览器赚钱 ………………………………………………40
统计数据 ……42
第3章 安卓. …………………………… 47
结构和目的 ..50
差异化 ………………………………50
安卓的更新 ………………………..52
谷歌服务 …………………………..53
安卓浏览器 ..54
安卓WebKit ……………………….54
Chrome …………………………….56
三星Chrome和其他浏览器 …….57
当前的内置浏览器 ………………59
可下载的浏览器 ………………….59
我应该测试哪些浏览器呢 …………………………….60
第4章 视口. …………………………… 63
像素 …………..66
三个视口 ……68
布局视口 …………………………..70
视觉视口 …………………………..71
理想视口 …………………………..72
哪一个视口 ………………………..73
缩放 …………..75
什么是缩放 ………………………..75
页面缩放 …………………………..76
拖放 …………………………………77
最小和最大缩放比例 ……………78
禁止缩放 …………………………..79
其他缩放形式 …………………….79
分辨率 ……….80
物理分辨率 ………………………..80
设备像素比 ………………………..80
dppx和dpi …………………………82
meta视口 …….82
width………………………………..83
initial-scale ……………………….85
完美的meta视口 ………………….85
太大的元素 ………………………..86
布局视口的最小宽度 ……………86
minimum-scale和maximum-scale ……………………………………………..87
@viewport 和 IE …………………88
媒体查询 ……89
媒体类型 …………………………..89
语法笔记 …………………………..90
宽度和高度 ………………………..92
在媒体查询中使用em …………..92
device-width和device-height …93
device-pixel-ratio和分辨率 ……94
转向 …………………………………95
aspect-ratio和device-aspect-ratio……………………………………………..95
JavaScript ……95
布局视口 …………………………..96
视觉视口 …………………………..97
理想视口——还是屏幕尺寸 …..97
devicePixelRatio…………………98
改变meta视口标签 ………………98
orientationchange事件………….99
resize事件 …………………………99
第5章 CSS. ………………………… 103
position:.xed ………………………………………………106
over.ow:auto ………………………………………………109
overflow-scrolling ……………. 110
background-attachment ………………………………… 111
尺寸单位vw和vh …………………………………………112
:active和:hover…………………………………………….113
过渡和动画 115
第6章 触摸和指针事件. ……………..117
触摸事件 ….120
touchcancel …………………….. 121
手势事件 ………………………… 122
其他事件 ………………………… 122
实例 …………123
下拉菜单 ………………………… 123
拖放 ………………………………. 124
滚动层 ……………………………. 125
事件和交互模式 …………………………………………126
等价事件 ………………………… 127
触摸事件的不同之处 ……..
在2013年，我们奇舞团内部就定了一个发展主题，叫作“从前端到终端”。因为“移动化”真的是一个很明显的趋势，在移动浪潮下，如果前端工程师们依然选择守着PC平台的一亩三分地，那么“前端工程师”这个角色很快就会被历史所淘汰。
幸运的是，被淘汰这件事情没有发生，也从来不会发生在“前端工程师”这样的角色上，因为“前端工程师”是互联网开发者中最善于学习和最勇于接受变化的一群人。从IE6时代到HTML5时代，从PC时代到移动时代，从页面制作到全栈时代，前端这个领域时时刻刻都在改变着，唯一不变的就是变化，拥抱变化已经成为印在优秀前端工程师骨子里的特质。学习，了解，不停地学习，不停地了解……前端工程师就是在这样一个循环过程中不断见证着技术的发展，创造出越来越人性化的交互和人机界面。
昨天，前端工程师还在为固定布局和流动布局大伤脑筋；今天，前端工程师已经在多元化的终端设备领域里面创造了“弹性布局”，也许明天，随着一种新的终端设备的问世，又会带来一种全新的完全颠覆过去的认知的布局方式。
变化，代表着未知，未知，代表着创造，创造则达成成就，前端之道如是，成长即是求道的过程。
这本书，作者以专业的视角将前端在移动平台上的知识和技能进行了系统的梳理，深入浅出地介绍了移动Web开发的基本原理和常规手段，虽然语不惊人，中规中矩，但不失为一本能为前端工程师打下牢固移动开发基础的好书。
移动端，显然是未来一段时间内前端开发的主战场，这本书就是前端工程师进军移动战场的极好武器，对每一位过去从事PC前端开发，现在和将来从事移动前端开发的工程师而言，这本书既是一本脉络清晰的教程，又是一本内容非常实用的参考书，如果你不了解移动平台上如何开发优秀的网站，那么，这本书就是为你准备的。
前端之道无止尽，未来前端工程师们会面临越来越多的挑战，问题越来越复杂，然而作为回报，可见的世界则必然越来越有色彩。
保持学习的心态，不断前行，未来总归是越来越美好的。
月影
360高级技术经理，奇舞团负责人
推荐序二
读过这本书，第一反应是，这本书的作者的工作内容一定跟我非常类似。PPK作为著名前端图书作者，一贯被奉为大神级人物，而其实除了他那本著名的《PPK谈JavaScript》，我对他知之甚少，而看到这本书的内容，我方才发现，原来他近期致力于移动开发。
一般的计算机书籍，多数不离教程和手册两类：教程从学习的角度，由浅入深去讲解一块知识；手册从技术逻辑的角度，全面提供信息以供查阅。而PPK这本书既不像教程，也不像手册，如果只用一句话来描述这本书，那就是“一个PC前端工程师迁移到移动前端所需要的书”。
这本书中，既有技术点，又有感性认知，我们先来谈谈书里的感性认知。作为一个长期致力于移动开发的前端工程师，我读来最有共鸣的部分，就是这本书讲述的移动开发的思路。我读这本书的过程，感觉就像是在回忆我最初接触移动前端开发的历程，读的过程中可以感受到移动端对前端开发的种种挑战和PPK的分析及解决方案。从操作系统、浏览器、Android机型适配到开发过程中要用到的视口、CSS特性、触屏事件，甚至成为移动Web开发者要用到的装备，PPK讲述了如何从普通的前端工程师转型到移动开发所需要的一切。
再来说说技术部分。这本书绝不是一本让你完整学习移动前端技术的书，但是我会建议每一个想要涉足移动前端开发的工程师（这几乎是必然的，2014年到2015年，国内外各种知名互联网产品都发生着移动端活跃用户数超过PC端的过程）先读过这本书，再去决定学习哪些前端技术。现今国内多数前端工程师，对移动前端开发的认知仍停留在“HTML5”这样一个抽象的概念上。但如果你去W3C学习HTML5，你会发现HTML5的新特性浩如烟海，兼容性也差异巨大，更重要的是，你无法判断哪些才是现在的移动前端真正要用的。而PPK这本书，正好能给你打下基础，指清方向。
翻译这本书的奇舞团，是国内顶尖的前端团队，他们的翻译非常贴近国内前端工程师的语言习惯，为这本本来就承袭了PPK大神的接地气语言风格的书添色不少。
最后，愿此书能服务更多有志于踏入移动时代的前端工程师，若真能如此，也是国内诸多移动前端团队的幸事。
winter（程劭非）
计算机之子，阿里高级技术专家
译者序
随着移动互联网的普及，移动网站的访问量也呈爆炸式增长的趋势。根据最
新的统计，国内一些大型的搜索、视频和社交类网站的移动访问量已经超越了PC
端。移动Web的兴起不仅极大地方便了我们的工作和生活，也给前端开发者带来
了前所未有的机遇。
然而，即使是在PC端经验丰富的前端开发者进入移动开发领域也并不是那么
容易。他们会遭遇到之前没有遇到过的问题：如何适配不同大小的屏幕、如何兼
容安卓的众多版本、为什么有些CSS属性在手机上不生效、手机上的click事件为
什么会有延迟等。本书给出了这些问题的答案，并且进行了详细的解释。
本书原作者Peter-Paul Koch是前端开发领域的专家，他维护的网站
quirksmode.org
译者序
随着移动互联网的普及，移动网站的访问量也呈爆炸式增长的趋势。根据最新的统计，国内一些大型的搜索、视频和社交类网站的移动访问量已经超越了PC端。移动Web的兴起不仅极大地方便了我们的工作和生活，也给前端开发者带来了前所未有的机遇。
然而，即使是在PC端经验丰富的前端开发者进入移动开发领域也并不是那么容易。他们会遭遇到之前没有遇到过的问题：如何适配不同大小的屏幕、如何兼容安卓的众多版本、为什么有些CSS属性在手机上不生效、手机上的click事件为什么会有延迟等。本书给出了这些问题的答案，并且进行了详细的解释。
本书原作者 Peter-Paul Koch是前端开发领域的专家，他维护的网站 quirksmode.org也是全球最知名的浏览器兼容性参考资源之一。他从2008年就开始了对移动Web的深入研究，以非凡的耐心和毅力为大家整理出了各种常见浏览器的特性支持表格。翻看一下他的表格中的浏览器之多，你就会觉得他对技术研究的深入和细致，着实令人钦佩。这本书是Peter-Paul Koch多年研究成果的总结，是进入移动Web开发领域的指南针。这也是为什么我们特别想翻译这本书，介绍
引言
引言
《移动Web手册》探究了进行移动和桌面Web开发时，我们应该注意的一些区别。本书并不是特别偏向技术，它只包含了十几个简单的代码示例。本书也不讨论框架或工具，只有关于移动Web最基本的知识。
移动Web和桌面Web并没有本质的区别。开发移动网站和开发桌面版本基本上是一样的，尤其是考虑到响应式设计的技术允许我们在大的电脑显示器和小的手机屏幕上使用同一套CSS。
然而，本书书名确实包含“移动Web”的字眼，这并非失误或者一个营销策略。你可以把它理解为“运行在比你听说过的还要多的浏览器上的支持小型触摸屏的网站”的缩写。移动Web开发和桌面版的开发没什么本质不同，但有些小小的区别，如果忽略它们会让你陷入麻烦之中。
我们最好把移动Web开发看作常规的Web开发之上的一层，其中包含了一些你必须理解的新概念和技术。只有理解了它们，你才能创造出超凡的移动体验。本书关注在移动开发层，主要聚焦以下三个话题。
1. 在电脑上，我们只有五种浏览器，但是在手机上有二三十种之多。它们并非完全独立的浏览器，其中的很多只是基于同一浏览器的不同版本，尤其是安卓WebKit。为什么会这样？该如何处理这么多版本的差异呢？为什么安卓上的浏览器会这么复杂？移动浏览器市场将会如何发展呢？
2. 在电脑上，只有一个视口（Viewport）：浏览器窗口。而手机上的视口有两种，现在又引入了第三种。为什么需要这个多的视口呢？它们是如何工作的呢？
3. 桌面浏览器有键盘和鼠标事件，而触摸屏需要特殊的JavaScript事件来响应用户的操作。这看起来很合理，但是微软并不这么认为。他们提出了一个关于JavaScript事件与交互模式之间关系的有趣哲学问题。在实践层面，触摸（touch）事件有一些你必须要了解的独有的特性。
浏览器、视口、触摸事件是本书的三大主题。除此之外，本书还要关注其他方面的一些内容：浏览器和操作系统发展的起起落落；代理浏览器是什么；为什么像position:fixed这样的CSS声明在移动设备上比PC上更难实现；如何通过搭建一个设备实验室并重新考虑那些过时的开发实践来成长为一个专业的移动 Web开发者。此外，你还可以学习为什么响应式设计是可以奏效的（你可能已经知道如何实现响应式设计，但你知道为什么它能奏效吗？）。
那么，我们一起开始移动Web开发的漫漫旅程吧！
本书不包括的内容
为了让你读到后面时不会感到意外，我先说明一下哪些话题是本书不会涉及的。本书是关于移动Web的，所以不会有原生应用相关的内容。你可以使用本书的知识开发混合型应用（hybrid app，使用HTML、CSS和JavaScript开发，再用原生应用包装），但仅限于网页的部分，不包括原生部分。
我不是一个设计师，所以除了一些很笼统的小贴士外，我不会讲关于设计的任何东西。当然，也不会讲设计模式相关的内容。
移动市场是多变的，当前非常流行的浏览器和设备一年后可能难觅踪迹。这也是为什么我会尽量避免研究某一款设备或浏览器。但考虑到iOS上的Safari对网站开发思维的巨大影响，它将是一个例外。
最后，最复杂的一个提醒：本书只研究桌面和移动Web最本质的不同，通常不会考虑像AppCache这种非移动独有的东西，尽管它在移动Web上比在桌面上更重要。有时这一区分可能很细微，但这个原则可以帮助我理清本书的范围，并让我的研究保持在可控的水平。
配套网站
写一本关于移动Web的书很有挑战性，因为它面向的是一个有史以来变化最快的市场：比传统的桌面Web要快得多。本书写于2014年夏天，但当你阅读它的时候，很多东西可能已经发生变化了。这也是为什么我聚焦在最核
一般的计算机书籍，多数不离教程和手册两类：教程从学习的角度，由浅入深去讲解一块知识；手册从技术逻辑的角度，全面地提供信息以供查阅。而PPK这本书既不像是教程，也不像手册，如果只用一句话来描述这本书，那就是“一个PC前端工程师迁移到移动前端所需要的书”。
这本书，作者以专业的视角将前端在移动平台上的知识和技能进行了系统的梳理，深入浅出地介绍了移动Web开发的基本原理和常规手段，虽然语不惊人，中规中矩，但不失为一本能为前端工程师打下牢固移动开发基础的好书。
读的过程中可以感受到移动端对前端开发的种种挑战和PPK的分析和解决方案。从操作系统、浏览器、Android机型适配、到开发过程中要用到的视口、CSS特性、触屏事件，甚至成为移动web开发者要用到的装备，PPK讲述了如何从普通的前端工程师转型到移动开发所需要的一切。
建议每一个想要将来涉足移动前端开发的工程师先读过这本书，再去决定学习哪些前端技术。HTML5的新特性浩如烟海，兼容性也差异巨大，更重要的是，你无法判断哪些才是现在的移动前端真正要用的。而PPK这本书，正好能给你打下基础，指清楚方向。
在2013年，我们奇舞团内部就定了一个发展主题，叫作“从前端到终端”。因为“移动化”真的是一个很明显的趋势，在移动浪潮下，如果前端工程师们依然选择守着PC平台的一亩三分地，那么“前端工程师”这个角色很快就会被历史所淘汰。
幸运的是，被淘汰这件事情没有发生，也从来不会发生在“前端工程师”这样的角色上，因为“前端工程师”是互联网开发者中最善于学习和最勇于接受变化的一群人。从IE6时代到HTML5时代，从PC时代到移动时代，从页面制作到全栈时代，前端这个领域时时刻刻都在改变着，唯一不变的就是变化，拥抱变化已经成为印在优秀前端工程师骨子里的特质。
学习，了解，不停地学习，不停地了解……前端工程师就是在这样一个循环过程中不断见证着技术的发展，创造出越来越人性化的交互和人机界面。
昨天，前端工程师还在为固定布局和流布动局大伤脑筋；今天，前端工程师已经在多元化的终端设备领域里面创造了“弹性布局”，也许明天，随着一种新的终端设备的问世，又会带来一种全新的完全颠覆过去的认知的布局方式。
变化，代表着未知，未知，代表着创造，创造则达成成就，前端之道如是，成长即是求道的过程。
这本书，作者以专业的视角将前端在移动平台上的知识和技能进行了系统的梳理，深入浅出地介绍了移动Web开发的基本原理和常规手段，虽然语不惊人，中规中矩，但不失为一本能为前端工程师打下牢固移动开发基础的好书。
移动端，显然是未来一段时间内前端开发的主战场，这本书就是前端工程师进军移动战场的极好武器，对每一位过去从事PC前端开发，现在和将来从事移动前端开发的工程师而言，这本书既是一本脉络清晰的教程，又是一本内容非常实用的参考书，如果你不了解移动平台上如何开发优秀的网站，那么，这本书就是为你准备的。
前端之道无止尽，未来前端工程师们会面临越来越多的挑战，问题越来越复杂，然而作为回报，可见的世界则必然越来越有色彩。
保持学习的心态，不断前行，未来总归是越来越美好的。
月影
360高级技术经理，奇舞团负责人
推荐序二
读过这本书，第一反应是，这本书的作者的工作内容一定跟我非常类似。
PPK作为著名前端图书作者，一贯被奉为大神级人物，而其实除了他那本著名的《PPK谈JavaScript》，我对他知之甚少，而看到这本书的内容，我方才发现，原来他近期致力于移动开发。
一般的计算机书籍，多数不离教程和手册两类：教程从学习的角度，由浅入深去讲解一块知识；手册从技术逻辑的角度，全面提供信息以供查阅。而PPK这本书既不像是教程，也不像手册，如果只用一句话来描述这本书，那就是“一个PC前端工程师迁移到移动前端所需要的书”。
这本书中，既有技术点，又有感性认知，我们先来谈谈书里的感性认知。作为一个长期致力于移动开发的前端工程师，我读来最有共鸣的部分，就是这本书讲述的移动开发的思路。我读这本书的过程，感觉就像是在回忆我最初接触移动前端开发的历程，读的过程中可以感受到移动端对前端开发的种种挑战和PPK的分析及解决方案。从操作系统、浏览器、Android机型适配到开发过程中要用到的视口、CSS特性、触屏事件，甚至成为移动web开发者要用到的装备，PPK讲述了如何从普通的前端工程师转型到移动开发所需要的一切。
再来说说技术部分。这本书绝不是一本让你完整学习移动前端技术的书，但是我会建议每一个想要涉足移动前端开发的工程师（这几乎是必然的，2014年到2015年，国内外各种知名互联网产品都发生着移动端活跃用户数超过PC端的过程）先读过这本书，再去决定学习哪些前端技术。现今国内多数前端工程师，对移动前端开发的认知仍停留在“HTML5”这样一个抽象的概念上。但如果你去W3C学习HTML5，你会发现HTML5的新特性浩如烟海，兼容性也差异巨大，更重要的是，你无法判断哪些才是现在的移动前端真正要用的。而PPK这本书，正好能给你打下基础，指清方向。
翻译这本书的奇舞团，是国内顶尖的前端团队，他们的翻译非常贴近国内前端工程师的语言习惯，为这本本来就承袭了PPK大神的接地气语言风格的书添色不少。
最后，愿此书能服务更多有志于踏入移动时代的前端工程师，若真能如此，也是国内诸多移动前端团队的幸事。
winter（程劭非）
计算机之子，阿里高级技术专家
译者序
随着移动互联网的普及，移动网站的访问量也呈爆炸式增长的趋势。根据最新的统计，国内一些大型的搜索、视频和社交类网站的移动访问量已经超越了PC端。移动Web的兴起不仅极大地方便了我们的工作和生活，也给前端开发者带来了前所未有的机遇。
然而，即使是在PC端经验丰富的前端开发者进入移动开发领域也并不是那么容易。他们会遭遇到之前没有遇到过的问题：如何适配不同大小的屏幕、如何兼容安卓的众多版本、为什么有些CSS属性在手机上不生效、手机上的click事件为什么会有延迟等。本书给出了这些问题的答案，并且进行了详细的解释。
本书原作者Peter-Paul Koch是前端开发领域的专家，他维护的网站quirksmode.org也是全球最知名的浏览器兼容性参考资源之一。他从2008年就开始了对移动Web的深入研究，以非凡的耐心和毅力为大家整理出了各种常见浏览器的特性支持表格。翻看一下他的表格中的浏览器之多，你就会觉得他对技术研究的深入和细致，着实令人钦佩。这本书是Peter-Paul Koch多年研究成果的总结，是进入移动Web开发领域的指南针。这也是为什么我们特别想翻译这本书，介绍给国内更多前端开发者的原因。
感谢周裕波、吴亮联系原作者和出版社，让我们有机会翻译这本书。感谢蔡平、周炜、夏明星等同事对本书的翻译提出的宝贵建议！感谢博文视点各位编辑给予本书的精心指导。
由于本书翻译时间仓促，译者水平有限，纰漏之处在所难免，恳请广大读者批评指正。
赵文博、王韦华、黄薇、黄小璐
2015年1月
评论
还没有评论。