英文原文：Mobile web content adaptation techniques

　　譯者：趙建光

　　如果你要構(gòu)建移動網(wǎng)站，那么本文可以幫你選擇合適的技術(shù)方案。本文并沒有具體描述如何去開發(fā)，只是介紹應(yīng)該如何選擇正確的方法。在開始之前我們有必要明確一下這次實踐的目標(biāo)。一般來說，想要構(gòu)建網(wǎng)站的人可分為兩大類：

• 改造現(xiàn)有的網(wǎng)站，使其可以通過移動設(shè)備訪問；
• 從頭開始構(gòu)建全新的移動網(wǎng)站。

　　這兩種目標(biāo)是截然不同的，所以相應(yīng)的技術(shù)方法也不同。前者的目標(biāo)可以歸結(jié)為：構(gòu)建一個無縫縮放的網(wǎng)站。這樣的網(wǎng)站可以在不同尺寸的屏幕上正常顯示，而網(wǎng)站原有的結(jié)構(gòu)、導(dǎo)航等則保持不變；后者的目標(biāo)是構(gòu)建一個全新的移動網(wǎng)站，以滿足移動用戶的需求（無論用戶是否處于運動狀態(tài)），這需要不同的視圖設(shè)置和交互設(shè)計。

　　為了區(qū)分現(xiàn)有的不同技術(shù)，本文使用了術(shù)語：“無縫縮放”和“內(nèi)容自適應(yīng)”。前者的意思是當(dāng)現(xiàn)有的網(wǎng)站面向不同分辨率的屏幕時具有更大的靈活性和適應(yīng)性；后者的意思是為移動用戶量身定做。

　　內(nèi)容自適應(yīng)技術(shù)的演變

　　21世紀(jì)的頭 10 年里，移動 Web 和桌面 Web 之間的區(qū)別還是很明顯的。當(dāng)時只有一種技術(shù)可以實現(xiàn)不同設(shè)備之間的內(nèi)容適應(yīng)——即在服務(wù)器端進行內(nèi)容適應(yīng)。這就意味著服務(wù)器要對設(shè)備進行識別以切換內(nèi)容保證其正確顯示。

　　實際上，服務(wù)器端的內(nèi)容適應(yīng)技術(shù)很重要。如果沒有此技術(shù)，Web 上的內(nèi)容將無法在設(shè)備上正確顯示。然而，在近 5 年情況變得更加復(fù)雜了。各種手機、平板電腦的出現(xiàn)使得移動瀏覽器與桌面瀏覽器之間的功能差異越來越小了。即使是最普通的功能手機也內(nèi)嵌了功能豐富的瀏覽器。這就導(dǎo)致了三種結(jié)果：

• 移動設(shè)備和桌面設(shè)備之間將不再有明顯區(qū)別。
• 既然這么多的設(shè)備都具有了功能強大且支持 JavaScript 的瀏覽器，也就有越來越多的新技術(shù)為這些新設(shè)備提供內(nèi)容適應(yīng)服務(wù)。
• 有些人質(zhì)疑內(nèi)容適應(yīng)技術(shù)的必要性，理由是智能手機幾乎可以顯示所有網(wǎng)站的內(nèi)容。

　　本文旨在介紹諸多內(nèi)容自適應(yīng)技術(shù)，說明各技術(shù)的優(yōu)缺點，以供參考。

　　下表列出了當(dāng)今的主流技術(shù)：

　　此表可能存在爭議，因為，為了簡潔起見，一些復(fù)雜的及細(xì)微的特征在表中沒有表現(xiàn)出來。

　　1、響應(yīng)式設(shè)計

　　響應(yīng)式設(shè)計這個術(shù)語之所以如此流行是因為 Ethan Marcotte 于 2010 年 5 月份在超具影響力的網(wǎng)站A List Apart 上發(fā)表的一篇文章及其 2011 年發(fā)表的書籍《Responsive Web Design》中都極力推廣該術(shù)語。Ethan 介紹了一系列的設(shè)計原則和技術(shù)，能夠保證網(wǎng)站在任何情況下都可以在移動設(shè)備上運行。實際上，流暢的設(shè)計一直是資深 Web 開發(fā)人員的追求目標(biāo)，但是 Ethan 所介紹的是一套具體的技術(shù)，大多數(shù) Web 開發(fā)者都可以在不使用其它新工具的情況下輕松實現(xiàn)這些技術(shù)，這就是該解決方案的誘人之處。

　　上述的響應(yīng)式設(shè)計是基于以下三種技術(shù)的：

• 流體網(wǎng)格——確保底層頁面的網(wǎng)格可以很好地適應(yīng)于各種尺寸的屏幕。
• 響應(yīng)式圖像——圖像在可變網(wǎng)格中可以正確顯示。
• CSS media queries——所使用的 CSS 樣式可適用于不同分辨率、不同類型的設(shè)備。

　　這些技術(shù)使得一個 HTML 頁面可以運行于不同設(shè)備，達(dá)到我們所期望的結(jié)果：采用這種技術(shù)所構(gòu)建的網(wǎng)站可以很好地支持舊版本的瀏覽器，可以在所有桌面瀏覽器及大多數(shù)智能手機上運行。Media Queries 上有很多這樣的例子。(注：Ethan 那本書的發(fā)行者 Jeffrey Zeldman 后來指出，響應(yīng)式設(shè)計不應(yīng)僅僅局限于 Ethan 所介紹的技術(shù)，而應(yīng)該包含所有可以實現(xiàn)這一目標(biāo)的方法。)

　　響應(yīng)式設(shè)計這一術(shù)語只是該技術(shù)的標(biāo)簽。該技術(shù)包含了一整套的設(shè)計原則，以實現(xiàn)無縫縮放功能。可是，響應(yīng)式設(shè)計容易與移動 Web 相混淆，導(dǎo)致開發(fā)者產(chǎn)生錯覺，他們會以為只要使用了響應(yīng)式設(shè)計的網(wǎng)站就是對移動用戶友好的網(wǎng)站，就完成了移動網(wǎng)站的開發(fā)。當(dāng)然了，做一個反應(yīng)速度快的網(wǎng)站是好事，但缺少一個充分發(fā)揮移動設(shè)備本身功能的解決方案。

　　說實話，Ethan 并不提倡用這種方法來構(gòu)建移動網(wǎng)站，他有一個很明智的建議：要根據(jù)具體項目來選擇合適的方法。他在書中指出：“最重要的是，Web 響應(yīng)式設(shè)計不是用來代替移動網(wǎng)站的。響應(yīng)式設(shè)計只是一個設(shè)計理念，一個前端的開發(fā)策略。既然是開發(fā)策略，這就意味著要根據(jù)具體項目來做出正確的評估。

　　作為一種實現(xiàn)移動網(wǎng)站的方法，響應(yīng)式設(shè)計存在以下三個問題：

• 只可以做到無縫縮放，而沒有實現(xiàn)內(nèi)容自適應(yīng)。從移動領(lǐng)域的角度來看，這種技術(shù)效率低下。（即使圖片在某移動設(shè)備上不能全屏查看或者根本無法顯示，也需要將整個圖片下載下來。）
• 由于響應(yīng)式設(shè)計理念中，HMTL 代碼是要傳遞到所有設(shè)備中的（無論大小），這就使得它不能很好地支持低端設(shè)備。波士頓環(huán)球報網(wǎng)站上大肆宣揚：“所謂的響應(yīng)式設(shè)計杰作，在主流手機（如：Motorola RAZR、Nokia 6100）上卻不能很好地運行，甚至根本無法運行。”
• 不能很好地處理實時數(shù)據(jù)，所以用戶體驗不夠好。

　　響應(yīng)式設(shè)計雖然可以實現(xiàn)無縫縮放，但是所支持的用例很有限，并不是一個很好的移動 Web 解決方案。

　　2、Mobile-First 響應(yīng)式設(shè)計

　　自從 Ethan 的文章及著作發(fā)表以來，許多人指出，如果將響應(yīng)式設(shè)計反過來用可能會更合理：如果你設(shè)計的網(wǎng)頁風(fēng)格默認(rèn)就是對移動用戶友好的，那么一些響應(yīng)式設(shè)計問題也就不存在了。特別地，避免下載不必要的大圖片問題就可以由該方法來解決。目前，這種技術(shù)的最佳實踐是：首先為所有設(shè)備提供合適的圖片，然后用這些圖片來代替大圖片。來自 The Filament Group 的 Scott Jehl 已經(jīng)做到了這點。

　　Mobile-First 設(shè)計理念的另一個優(yōu)點是：該設(shè)計理念可以作為一個楔子，使得設(shè)計人員找到了一個充分的理由來清除多年來在桌面網(wǎng)站上積累下來的不必要的混亂。因為按照 Mobile-First 的設(shè)計理念，這些混亂是必須要被剔除的。

　　Mobile-First 響應(yīng)式設(shè)計是對原有技術(shù)的重大革新，但也存在以下問題：

• 只實現(xiàn)了無縫縮放，而沒有實現(xiàn)內(nèi)容自適應(yīng)。
• 桌面網(wǎng)站需要從頭開始重新設(shè)計。也許你認(rèn)為這反倒是件好事。

　　總之，如果你的目標(biāo)是構(gòu)建移動網(wǎng)站，Mobile-First 響應(yīng)式設(shè)計是唯一實用的響應(yīng)式設(shè)計理念，因為從低端設(shè)備到桌面瀏覽器都可以使用該方案。

　　3、漸進增強（PE）

　　漸進增強（PE）是一個新近流行的有關(guān)內(nèi)容適應(yīng)方面的術(shù)語。最初是在約 10 年前由 Steven Champeon 和 Nick Finck 在他們的文章《Inclusive Web Design Future》中提出來的，該文章發(fā)表于 SXSW。漸進增強的核心思想是：在單一的網(wǎng)頁上實現(xiàn) JavaScript 增強邏輯，使其能夠服務(wù)于所有類型的設(shè)備。如果設(shè)備過于簡陋，則 JavaScript 可能得不到運行或報錯，因此用戶體驗會很差；如果是智能設(shè)備或桌面瀏覽器，則 JavaScript 會逐漸向頁面增加新的功能，充分發(fā)揮設(shè)備的硬件功能。理論上講，分層是沒有上限的，可以逐漸從功能手機瀏覽器漸漸過度到臺式電腦瀏覽器。

　　PE 的誘人之處是很明顯的：它可以滿足所有類型的設(shè)備（包括低端設(shè)備），因為它是故障安全的解決方案；高端設(shè)備的功能又不會因為這個“最低限度共同點”而受到限制。剛剛發(fā)布的 jQuery Mobile 庫就用到了 PE 解決方案，實際上，PE 將內(nèi)容適應(yīng)邏輯從服務(wù)器端移到了客戶端。這種方案存在兩個問題：

• 該技術(shù)的核心“漸進增強”的執(zhí)行是需要一定時間的，所需時間的長短主要取決于設(shè)備的硬件性能，當(dāng)然也可能與網(wǎng)速有關(guān)。舉個例子，某些型號的黑莓手機理論上是支持 JavaScript 的，但實際上運行速度太慢以至于沒有什么實際用途。
• 和以往的技術(shù)一樣，該技術(shù)中多個用例共用同一個基本的 HTML 文件，這在功能上似乎很受限。

　　實際上，PE 技術(shù)的最佳應(yīng)用是消除移動設(shè)備之間的差異，而不是作為一個綜合的內(nèi)容適應(yīng)解決方案。

　　4、服務(wù)器端內(nèi)容適應(yīng)技術(shù)

　　服務(wù)器端內(nèi)容適應(yīng)技術(shù)早在 12 年前移動 Web 剛剛出現(xiàn)時就開始使用了。該技術(shù)依賴于設(shè)備檢測庫或依賴于安裝在 Web 服務(wù)器（或遠(yuǎn)程 Web 服務(wù)）上的數(shù)據(jù)庫，檢測訪問網(wǎng)站的設(shè)備并返回設(shè)備的性能信息。服務(wù)器端可以根據(jù)這些信息對頁面進行微調(diào)，使之很好的適應(yīng)設(shè)備的性能。由于服務(wù)端內(nèi)容適應(yīng)技術(shù)中包含了設(shè)備檢測技術(shù)，所以有時也被稱為“瀏覽器嗅探”。盡管也有不少反對者，但瀏覽器嗅探確實很穩(wěn)定很精準(zhǔn)，據(jù)統(tǒng)計，該解決方案檢測設(shè)備的精準(zhǔn)度達(dá)到了 99.5% 以上。

　　該技術(shù)的有效性不言自明：它仍然是迄今為止最常用的內(nèi)容適應(yīng)技術(shù)，幾乎所有重視移動用戶體驗的知名互聯(lián)網(wǎng)公司都在使用該技術(shù)，包括 Google、Facebook、Amazon、Youtube、Ebay 以及 Yahoo。你很難找到一個沒使用服務(wù)器端內(nèi)容適應(yīng)技術(shù)而又取得成功的移動網(wǎng)站。

　　然而，服務(wù)器端內(nèi)容適應(yīng)技術(shù)也不是沒有缺點。其缺點主要有以下兩點：

• 所用到的設(shè)備檢測技術(shù)需要 Web 開發(fā)者不斷進行更新，并且大多數(shù)設(shè)備檢測技術(shù)都是商業(yè)化的。
• 不能很好地使用瀏覽器的實時數(shù)據(jù)（例如，GPS 定位或者設(shè)備當(dāng)前的方向）以幫助 Web 開發(fā)者更好地服務(wù)于用戶。

　　目前，WURFL 和 DeviceAtlas 是設(shè)備檢測方面的領(lǐng)軍產(chǎn)品，這兩款產(chǎn)品都是商業(yè)化的。

　　5、混合方法

　　最后要介紹的技術(shù)是混合方法，該方法把服務(wù)器端內(nèi)容適應(yīng)技術(shù)與漸進增強技術(shù)結(jié)合在了一起。這種技術(shù)的工作原理是，當(dāng)服務(wù)器收到客戶端的頁面請求時，服務(wù)器端首先向客戶端提交一個基于服務(wù)器端內(nèi)容適應(yīng)原則的初始頁面，然后由客戶端的 JavaScript 來捕獲設(shè)備的性能信息并返回給服務(wù)器端，服務(wù)器端根據(jù)所捕獲的信息對發(fā)向該設(shè)備的后續(xù)頁面進行微調(diào)，使頁面更好地適應(yīng)該設(shè)備。

　　該技術(shù)首先是由 Bryan Rieger 和 Stephanie Rieger 發(fā)布的，他們在 yiibu.com 上很詳細(xì)地記錄了他們探索各種內(nèi)容適應(yīng)技術(shù)的曲折而漫長的道路。有趣的是，他們在嘗試該技術(shù)之前幾乎已經(jīng)嘗試過了所有上文已經(jīng)介紹過的技術(shù)。

　　他們使用了設(shè)備檢測技術(shù)和瀏覽器屬性“隱性數(shù)據(jù)庫”，還使用了 modernizr-like JavaScript 腳本。在此不詳述細(xì)節(jié)，建議大家看看他們的介紹：“適應(yīng)：為什么響應(yīng)式設(shè)計始于服務(wù)器端？”

　　這種混合方法對用戶端和服務(wù)器端來說都是最合適的方式——既可以利用高速的服務(wù)器端內(nèi)容適應(yīng)，又可以利用來源于設(shè)備自身的屬性來調(diào)整頁面。用戶可以得到一個初始的適合當(dāng)前設(shè)備的頁面，又不會有什么性能開銷，并且后續(xù)頁面會根據(jù)此頁面自動進行調(diào)整。但是，這種方法也存在兩個缺點：

• 實現(xiàn)起來相對復(fù)雜，這點 Riegers 兩位也欣然承認(rèn)。復(fù)雜性源于以下兩個因素：復(fù)雜性源于以下兩個因素：1）需要建立一個數(shù)據(jù)庫以保存瀏覽器的屬性；2）需要寫 JavaScript 代碼，以實現(xiàn)從瀏覽器中提取屬性并存入數(shù)據(jù)庫。
• 首次訪問服務(wù)器時，在用戶得到有用信息之前，需要一個從瀏覽器到服務(wù)器之間的往返時間的延遲開銷。在后續(xù)請求中可以使用 cookies 來消除該延遲。

　　總結(jié)：

　　所有可用的技術(shù)都介紹過了，接下來你會如何選擇呢？當(dāng)然，要視具體情況而定。筆者認(rèn)為，任何以“單個 HTML 文檔來滿足所有設(shè)備”為前提的技術(shù)，本是就是有缺陷的，就如同：大多數(shù)的電視內(nèi)容不是多次播放的電影，大多數(shù)的網(wǎng)站也不是紙質(zhì)報紙的完美復(fù)制品。用戶對某些類型的網(wǎng)站（例如博客）的交互需求是有限的，這樣單一的一套交互方案是可以同時滿足桌面與移動用戶的。但是，在更一般的情況下，如果也讓桌面與移動用戶共用同一套方案，最好的結(jié)果是：功能嚴(yán)重受限； 最壞的結(jié)果是：根本無法運行。

　　正如一位 CTO 所說：“客戶端功能檢測如何將一個航空公司的介紹性網(wǎng)站轉(zhuǎn)變成為移動電子登機服務(wù)呢？漸進增強理念是以‘所有用戶的需求都相同，只是界面布局不同’的假設(shè)為前提的。”

　　如果航空公司所構(gòu)建的移動網(wǎng)站和桌面網(wǎng)站采用相同的基本模板，這樣真的可行嗎？如果你真的想提供一流的移動用戶體驗，那么響應(yīng)式設(shè)計和漸進增強將得不到很好的體現(xiàn)。你在 Alexa 網(wǎng)站上快速看一眼就會知道，想要提供優(yōu)質(zhì)的移動用戶體驗需要對 HTML 進行量身定做，而不是簡單地調(diào)整像素和 div 元素。

　　總之，如果你的網(wǎng)站只是運行在一些高端移動設(shè)備上，并且你不會特意去照顧某些移動 Web 用戶，那么你可以采用響應(yīng)式設(shè)計方案，或者 Mobile-First 響應(yīng)式設(shè)計方案。如果你的網(wǎng)站元素不太復(fù)雜，那么這兩種方案會很奏效。

　　如果你想提供一個全新的移動用戶體驗設(shè)計或者你想滿足所有的移動設(shè)備，那么你只能使用服務(wù)器端內(nèi)容適應(yīng)方案或混合方法。這也是所有知名互聯(lián)網(wǎng)公司都采用這種方案的原因。

　　上述觀點都是基于對新媒體的信仰：移動 Web 是一種新媒體，絕不是舊媒體的縮略版本；是一種功能強大的媒體，而不是功能弱小的媒體；是一種全新的 Web，而不是合成的雜牌 Web。只有這樣看待和使用該新媒體，它才能得到最合理、最成功的應(yīng)用。

　　參考文章：

• Not a mobile web, merely a 320px-wide one
• There is no Mobile Web
• Responsive images part 1
• State of mobile web development, part 1/3: the problem
• State of mobile web development, part 2/3: progressive enhancement
• State of mobile web development, part 3/3: the mobile industry’s failings
• Benchmarking your device detection solutions

it知識庫：五個非常重要的移動Web內(nèi)容適應(yīng)設(shè)計理念，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。