本书主要讲解了移动Web开发和传统PC网站开发的不同之处。作者首先对移动互联网相关的运营商、设备、操作系统和软件进行了简单的介绍，让读者理解移动开发的复杂之处。接下来对移动设备上的各种浏览器进行了详细介绍，以及这些浏览器的市场占有率、特性支持等。本书为那些想进入移动Web开发领域的人提供了一些指导性的建议并对移动Web开发的未来进行了展望。

推荐序一 在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年夏天，但当你阅读它的时候，很多东西可能已经发生变化了。这也是为什么我聚焦在最核心的问题上，避免花太多精力在类似于浏览器Bug这种多变的细节上的原因。 然而，你还是应该去了解一些常见的bug。所以我创建了一个配套网站： http://quirksmode.org/mobilewebhandbook。网站上有支撑这本书内容的一些浏览器研究成果，同时也会列出随着时间的发展哪些bug被修复、更新了，以及浏览器新增的其他一些值得注意的特性。 在本书中，我偶尔会给出一些浏览器兼容性的提示，但在更多情况下我只会给出一些粗略的建议，比如我会说“很多浏览器”支持某项特性。而配套网站上的内容总是会给出进一步的分解，并且包含一些bug的说明。 平板电脑 《移动Web手册》关注移动设备，也就是那些你可以握在手中操作并且能够联网的设备。确切地说，并不包含平板电脑或其他类型的设备。 然而，本书的很多内容也适用于平板电脑。平板电脑也有支持触屏的浏览器，虽然它们的屏幕比手机要大，但相比桌面电脑还是要小；它们也有三个视口而不是一个。 此外，该如何确切定义什么是平板电脑呢？尤其是三星倾向于生产屏幕越来越大的手机，你说它们是小平板也不为过。微软Surface平板可以外接一个键盘，变得多少看起来有点像桌面电脑。 现在我们还不清楚平板是不是还将维持在一个单独的设备分类里面，或是将悄然并入手机或笔记本分类中。从技术的角度来看，这都不重要。平板上的浏览器在各方面都和移动浏览器无异，它们遵循相同的规则及限制。尽管本书后面将几乎不再提及平板，但你仍可以放心地假定你为移动设备创建的网站可以在平板上正常运行。当然，你得考虑到平板的屏幕较大，你的响应式设计要能适应那个尺寸。 致谢 这本书不是在我一个人的头脑中冒出来并完全成型的，有很多人参与其中。 三星2014年二季度发布的Galaxy Note 8.0，是一个大号手机还是一个迷你平板呢？这种区分有意义吗？ 在这里我想对他们表示感谢。Vitaly Friedman看到了这本书的潜力和我签约，并担当了所有章节的总编辑。Markus Seyfferth筹划好了合同、印刷等所有的实际问题。Stephanie Rieger是本书所有章节的技术编辑。Stephen Hay负责封面、插图以及本书的总体设计。Patrick Lauke编辑了“触摸和指针事件”一章，他对这个主题十分熟悉。Max Firtman负责“浏览器”和“安卓”两章的编辑工作，并提供了非常有价值的反馈。 Jason Grigsby的一次引人入胜的演讲以及与微软IE团队的一次交流促使我对“触摸和指针事件”一章的内容进行了彻底的检查和修改。最后，Vasilis van Gemert从一个教师的角度通读了本书第2版的草稿。Owen Gregory进行了最终版本的细节修改，让本书从一本好书变成一本伟大的书。女士们先生们，感谢你们所有的人！没有你们及时的帮助，本书就不会有现在这样高的质量。很遗憾，书中剩下的错误，属于我自己。 *** 现在，我们开始对移动Web世界的总体进行概览吧。你会发现它和我们曾经习惯的桌面世界有很多的不同。

目　　录 第1章　移动世界.............................. 1 移动价值链 ....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 触摸事件的不同之处 ............. 128 能否合并触摸事件与鼠标事件 ....................................................... 130 mouseover和pointerover问题 . 132 输入模式的渐进增强 ............. 133 判断当前的交互模式 ............. 134 触摸事件的级联 ................................................138 轻触操作 .............................. 139 其他动作 .............................. 141 Safari：取消事件级联 ........... 142 Safari：鼠标事件冒泡 ........... 142 剖析Click ....144 300毫秒 ................................ 144 同一个像素 ........................... 146 剖析触摸事件 ....................................................147 touchList .............................. 148 获取事件坐标 ....................... 149 离开元素 .............................. 150 阻止默认行为 ....................... 151 实例：水平滚动和垂直滚动 ... 152 指针事件 ....153 事件名和前缀 ....................... 155 事件属性 .............................. 156 touch-action ......................... 156 第7章　成为移动Web开发者. ......... 159 理想的设备实验室 ............................................162 升级 ..................................... 163 安卓 ..................................... 164 不要安装实验版本 ................ 166 获得设备 .............................. 166 分享设备 .............................. 167 测试哪些东西 ....................................................168 如何进行测试 ....................................................169 时间 ..................................... 169 准备工作 .............................. 170 分批测试 .............................. 171 测试流程 .............................. 173 克服过时的惯性思维 ........................................174 浏览器探测 ........................... 174 JavaScript脚本库 .................. 175 移动网络 ....176 连接速度 .............................. 177 第8章　移动Web的未来. ............... 179 HTML5 vs. 原生应用 .........................................181 模拟原生应用 ....................................................182 网络连通性和AppCache ........ 183 安装到主屏幕 ....................... 183 设备API ............................... 184 模拟Web .....186 分享应用 ....187