（雙色）本書主要講解了移動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世界的總體進行概覽吧。你會發現它和我們曾經習慣的桌面世界有很多的不同。