接觸移動(dòng)WEB前端開(kāi)發(fā)近一年了。在這短短的時(shí)間里，我通過(guò)吸收源信、神魚等前輩的經(jīng)驗(yàn)，以及不斷的探索和實(shí)戰(zhàn)，總結(jié)出了一套自己的Mobile WEB“研發(fā)流程”。為什么稱其為“R&D”過(guò)程而不是“開(kāi)發(fā)”過(guò)程，解釋如下。首先我們來(lái)看一下“研發(fā)”的流程圖：

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

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

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

瀏覽器：IE (6, 7, 8)/Firefox/Safari/Opera/Chrome

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

市場(chǎng)份額和使用分布相對(duì)穩(wěn)定

相對(duì)開(kāi)放，廠商對(duì)開(kāi)發(fā)者的支持更好

不同操作系統(tǒng)下瀏覽器渲染差異不大

經(jīng)過(guò)前端開(kāi)發(fā)者長(zhǎng)期的研究和總結(jié)，其渲染特性和標(biāo)準(zhǔn)支持基本眾所周知

在移動(dòng)WEB前端開(kāi)發(fā)領(lǐng)域，情況比較混亂，需要注意的事情也復(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)份額和使用細(xì)分不穩(wěn)定，新機(jī)型、新瀏覽器容易占領(lǐng)市場(chǎng)

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

不同的操作系統(tǒng)、不同的瀏覽器、同一系統(tǒng)下的不同瀏覽器、同一瀏覽器的不同操作系統(tǒng)，甚至同一系統(tǒng)或?yàn)g覽器的不同版本，都可能造成頁(yè)面效果的較大差異。差異（很繞口，其實(shí)就是排列組合）

由于缺乏對(duì)兼容性的研究（尤其是在中國(guó)），加上操作系統(tǒng)和瀏覽器的封閉和不斷變化，我們對(duì)其特性的把握基本是空白

經(jīng)過(guò)對(duì)比，我們很快就會(huì)發(fā)現(xiàn)，要想我們的Mobile WEB在更多的客戶端上完美運(yùn)行，我們需要花費(fèi)大量的時(shí)間和精力去了解和掌握各種操作系統(tǒng)、平臺(tái)、手機(jī)瀏覽器的特性。只有對(duì)它們有一定的了解和掌握，才能進(jìn)一步掌控Mobile WEB兼容性的發(fā)展。

因此，“研發(fā)”包括“操作系統(tǒng)和瀏覽器研究”和“移動(dòng)WEB開(kāi)發(fā)”兩部分。

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

如前所述，我們要花費(fèi)大量時(shí)間和精力研究移動(dòng)設(shè)備的操作系統(tǒng)和瀏覽器。羅馬不是一天建成的，胖子也不是一口飯吃完的。我們需要一個(gè)循序漸進(jìn)的過(guò)程，一個(gè)長(zhǎng)期的研究，不斷積累點(diǎn)點(diǎn)滴滴的經(jīng)驗(yàn)，才能逐漸了解這些特點(diǎn)。此外，移動(dòng)設(shè)備更新?lián)Q代頻繁，新機(jī)型、新瀏覽器日新月異。我們還需要定期跟進(jìn)最新動(dòng)態(tài)。因此，這就是為什么需要定期研究的原因：

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

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

在只有一個(gè)移動(dòng)WEB前端開(kāi)發(fā)的情況下，建議每六個(gè)月進(jìn)行一次系統(tǒng)的調(diào)研，為兼容性開(kāi)發(fā)打下基礎(chǔ)。在接下來(lái)的六個(gè)月內(nèi)，移動(dòng)端WEB頁(yè)面的前端開(kāi)發(fā)將以本研究成果為基礎(chǔ)，一般不需要對(duì)頁(yè)面進(jìn)行兼容性測(cè)試。對(duì)于兼容性測(cè)試，在之前的很多文章中都有提到，下面會(huì)再提到。

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

無(wú)論是WEB開(kāi)發(fā)還是移動(dòng)WEB開(kāi)發(fā)，兼容性測(cè)試都是必不可少的一步。但在工藝上，后者與前者有很大不同。

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

但是手機(jī)WEB前端開(kāi)發(fā)就是在頁(yè)面開(kāi)發(fā)之前做瀏覽器兼容性測(cè)試

移動(dòng)端瀏覽器并不像桌面瀏覽器那樣容易查看完成的頁(yè)面效果。試想一下，如果和WEB的前端開(kāi)發(fā)流程一樣，每完成一個(gè)Mobile WEB頁(yè)面，都需要大量的測(cè)試機(jī)進(jìn)行測(cè)試對(duì)比，找出問(wèn)題再修改，那就太荒謬了然后再次測(cè)試！

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

測(cè)試XHTML 的每個(gè)公共元素

測(cè)試CSS 的每一個(gè)公共屬性

測(cè)試JavaScript 的基本功能支持

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

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

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！