接觸Mobile WEB前端開發(fā)將近一年時(shí)間了，在這不算短的時(shí)間里，通過吸取圓心、沉魚等前輩們的經(jīng)驗(yàn)以及不斷的摸索和實(shí)戰(zhàn)，總結(jié)出一套自己的Mobile WEB“研發(fā)流程”。為什么叫“研發(fā)”流程而不是“開發(fā)”流程，在下文中會(huì)進(jìn)行解釋。首先我們來(lái)看一下“研發(fā)”的流程圖：

1. 為什么要叫“研發(fā)”流程？

我們知道，對(duì)于傳統(tǒng)的WEB前端開發(fā)，一般情況下我們需要關(guān)注的操作系統(tǒng)/瀏覽器情況如下：

操作系統(tǒng)：Windows/MacOS

瀏覽器：IE（6、7、8）/Firefox/Safari/Opera/Chrome

這些操作系統(tǒng)和瀏覽器的基本狀況如下：

市場(chǎng)占有率和使用分布情況相對(duì)穩(wěn)定

比較開放，廠商對(duì)開發(fā)人員的支持較好

不同操作系統(tǒng)下，瀏覽器渲染情況差別不大

經(jīng)過前端開發(fā)者們的長(zhǎng)期研究和總結(jié)，它們的渲染特性、標(biāo)準(zhǔn)支持情況基本家喻戶曉

而在Mobile WEB前端開發(fā)領(lǐng)域，狀況則相當(dāng)?shù)幕靵y，我們需要關(guān)注的東西則復(fù)雜多了：

操作系統(tǒng)（平臺(tái)）：Symbian（S40/S60/S80/S90）/iPhoneOS/Android/WM（WinCE）/MTK/Linux/BB/PalmOS/Maemo（Meego）…

內(nèi)置瀏覽器：Symbian/Chrome Lite/iPhone Safari/MTK/IE Mobile/BB Browser/Opera（OEM）/…

第三方瀏覽器：Opera Mini/Opera Mobile/Skyfire/NetFront/UCWEB/QQ瀏覽器/Go瀏覽器/…

這些操作系統(tǒng)和瀏覽器的基本狀況則是：

市場(chǎng)占有率和使用分部情況不穩(wěn)定，新機(jī)型、新瀏覽器會(huì)很容易占領(lǐng)市場(chǎng)

大部分內(nèi)置瀏覽器不夠開放，操作系統(tǒng)和瀏覽器廠商對(duì)開發(fā)人員的支持很不到位

不同的操作系統(tǒng)、不同的瀏覽器下，相同系統(tǒng)下的不同瀏覽器，相同瀏覽器在不同的操作系統(tǒng)下，甚至同一個(gè)系統(tǒng)或?yàn)g覽器的不同版本，都可能會(huì)導(dǎo)致頁(yè)面效果產(chǎn)生很大的差異（很繞口，其實(shí)就是排列組合）

由于兼容性方面的研究非常稀少（尤其在國(guó)內(nèi)），加上操作系統(tǒng)和瀏覽器的封閉和日新月異的變化，我們對(duì)它們特性的掌握程度也是基本空白

經(jīng)過比較，我們可以很快發(fā)現(xiàn)，想要讓我們的Mobile WEB在更多的客戶端上表現(xiàn)完美，我們需要大量的時(shí)間和精力去了解、去掌握各個(gè)操作系統(tǒng)、平臺(tái)、移動(dòng)瀏覽器的特性，只有對(duì)它們有了一定程度的了解和掌握，我們才能更深一層的駕馭Mobile WEB兼容性開發(fā)。

因此，“研發(fā)”包含了“操作系統(tǒng)、瀏覽器研究”和“Mobile WEB開發(fā)”兩個(gè)部分。

2. 循序漸進(jìn)的周期性研究

如前所述，我們想要對(duì)移動(dòng)設(shè)備的操作系統(tǒng)和瀏覽器們進(jìn)行研究，需要花費(fèi)大量的時(shí)間和精力。羅馬不是一天建成的，胖子也不是一口吃出來(lái)的。我們需要一個(gè)循序漸進(jìn)的過程，一個(gè)長(zhǎng)期性的研究，經(jīng)過不斷地積累點(diǎn)滴經(jīng)驗(yàn)，才能夠逐步了解這些特性。另外，移動(dòng)設(shè)備更新頻繁，新機(jī)型和新瀏覽器日新月異，我們也需要階段性地跟進(jìn)最新發(fā)展情況。因此，這就是需要周期性研究的原因：

需要大量的時(shí)間和精力

移動(dòng)設(shè)備更新頻繁

在Mobile WEB前端開發(fā)只有一個(gè)的情況下，建議每隔半年進(jìn)行一次系統(tǒng)的研究，為兼容性開發(fā)打下基礎(chǔ)。在此后的半年內(nèi)，Mobile WEB頁(yè)面的前端開發(fā)都將基于此次研究結(jié)果，一般不需要再對(duì)頁(yè)面進(jìn)行兼容性測(cè)試。對(duì)于兼容性測(cè)試，之前很多文章中提到過，下面也會(huì)再次提到。

3. 關(guān)于兼容性測(cè)試

兼容性測(cè)試，是WEB開發(fā)和Mobile WEB開發(fā)都必不可少的步驟。但是在流程上，后者跟前者卻有著很大的區(qū)別。

WEB前端開發(fā)是在頁(yè)面開發(fā)后做瀏覽器兼容性測(cè)試

而Mobile WEB前端開發(fā)卻是在頁(yè)面開發(fā)之前做瀏覽器兼容性測(cè)試

移動(dòng)瀏覽器不像桌面瀏覽器那么輕松地查看做好的頁(yè)面效果，試想，如果跟WEB前端開發(fā)流程一樣的話，每做完一張Mobile WEB頁(yè)面，就要搞一大堆測(cè)試機(jī)進(jìn)行測(cè)試查看對(duì)比效果，發(fā)現(xiàn)問題修改然后再測(cè)試，這會(huì)是件很荒唐的事情！

因此，我們就需要用兼容性測(cè)試的結(jié)果來(lái)主導(dǎo)前端開發(fā)：

測(cè)試XHTML的每一個(gè)常用元素

測(cè)試CSS的每一個(gè)常用屬性

測(cè)試JavaScript的基本特性支持

測(cè)試其它與移動(dòng)設(shè)備相關(guān)的點(diǎn)

在測(cè)試結(jié)果整理出來(lái)后，我們可以通過它，知道什么元素、什么屬性可以使用，什么避免使用，并在開發(fā)時(shí)遵守這些使用約定。