無線Web開發(fā)簡介

無線Web開發(fā)是基于智能手機上的游覽器進行的Web開發(fā)?，F(xiàn)在智能手機主要有Android和IOS兩種操作系統(tǒng)的，因此基于手機Web的開發(fā)，主要是基于Android和IOS兩種操作系統(tǒng)上的web開發(fā)。

基于兩種操作系統(tǒng)的Web開發(fā)的共同點：

• 兩者的瀏覽器引擎是基于webkit的，因此基于手機上的Web開發(fā)，主要是基于webkit的游覽器開發(fā)，對于其他瀏覽器，例如firefox、ie和opera等游覽器，可以不用做兼容考慮。
• 兩者都是按照HTML5規(guī)范開發(fā)，因此對于HTML5的特性支持性都比較好。

不同點：

• android的廠商碎片化比較嚴重，加上由于webkit的開源特性，導致市面上有非常多的修改版webkit游覽器， 這些修改版的webkit，廠商會根據(jù)自己的需求對webkit進行修改，導致對HTML5的特性碎片化嚴重。 同時HTML5標準不同廠商的實現(xiàn)不同，造成對于HTML5特性的支持度不同。 以input type=date 日期控件為例，有些廠商實現(xiàn)了該標準，有些廠商沒有實現(xiàn)該標準，就算實現(xiàn)了標準的廠商， 對于日期控件的展現(xiàn)、交互也不盡相同。
• android的版本碎片化。
• ios由于其封閉性，并且蘋果公司嚴格按照html5的規(guī)范來進行實現(xiàn)，因此在ios上html5的規(guī)范實現(xiàn)的較好。
• ios和android對于html5的規(guī)范實現(xiàn)在界面層和交互層的實現(xiàn)是不同的，就拿上面的列子來說 type date的日期控件，ios和android的交互實現(xiàn)，完全不同。雖然都按照w3c的標準進行了實現(xiàn)。這個也是在日常web開發(fā)中需要注意的。

手機性能

智能手機，其硬件發(fā)展的非常迅速，不過無論其硬件發(fā)展多塊，由于手機的特點，性能和功能是一個平衡點。因為誰也不會用一個性能超好，但是手機非常燙并且只能用1個小時的機器。因此在很多方面，手機上的性能是受到一定限制。web這塊受這個影響叫native的方面要大很多。因此web這塊不是編譯型語言，只能動態(tài)在手機上運行，再加之webkit核心所占的內(nèi)存較大，是單進程單線程應用，其受CPU、內(nèi)存的影響更大。

頁面渲染

手機Web開發(fā)在性能上影響較大的是頁面渲染問題，而js腳本性能問題不再突出，這個主要歸功于在android上使用了v8引擎，大大提升了腳本的執(zhí)行性能。這個和PC上的情況完全不同，因為在PC上，由于其高性能的硬件，加上強勁的顯卡，使得頁面渲染的性能非常之高。而在手機上完全不同，有限的硬件性能，加上沒有顯卡這類專門處理顯示的硬件，使得所有頁面渲染的工作都由CPU來執(zhí)行。加上CPU本身的執(zhí)行頻率有限，就會造成頁面渲染緩慢。因此在手機上，會發(fā)現(xiàn)當頁面出現(xiàn)大量的渲染變化的時候，會出現(xiàn)卡頓現(xiàn)象。比如長列表滑動，頁面切換動畫等等。這些條件都限制了HTML5的功能發(fā)揮，因此在涉及到動態(tài)變化的時候，更加需要小心處理。

鍵盤

鍵盤也是和PC不同之處，在剛剛做手機Web開發(fā)的時候，會經(jīng)常忘記的。由于現(xiàn)在的手機使用了軟鍵盤，因此軟鍵盤在某些時候，會成為頁面的一部分。鍵盤是一個非常特別的設備，說特別是因為，不同的手機對于鍵盤對于html頁面的布局的實現(xiàn)不同。下面通過以下幾個方面，闡述手機鍵盤的特點：

• 鍵盤的布局 由于手機界面非常小，因此鍵盤會占住手機屏幕的一大部分，對于鍵盤對html的頁面布局影響，如果從來沒有做過的人，也許不會注意到，android和ios的處理方式，android中各個廠商處理的方式又有所不同。ios對于從下方推出鍵盤的時候，如果輸入控件在頁面推出之后，在鍵盤的高度的上方的話，則鍵盤是以一個浮層的方式彈出，并且將那個觸發(fā)的控件推到鍵盤的上方。如果那個控件在頁面底部，如果推出的鍵盤會覆蓋該控件，系統(tǒng)會將整個頁面向上推，直到將那個控件推到鍵盤上方為止。而android的實現(xiàn)的不同，有部分的android的實現(xiàn)和ios一樣，有些android的機型的實現(xiàn)卻不同，如果發(fā)現(xiàn)觸發(fā)的input控件比鍵盤的高度底的時候，會自動將整個document的高度增加，增加到這個控件的高度超過鍵盤的高度為止。由于實現(xiàn)的不同，會造成以下兩個問題，

• 對于某些js模擬彈窗類型，會造成定位問題。一個比較經(jīng)典的案例，就是toast的提示，toast會出現(xiàn)在手機靠底部的位置，通常使用的是fixed的屬性，如果按照ios的方式，將整個文檔往上推，則不會出現(xiàn)問題，不過如果是將整個document動態(tài)增高，就會出現(xiàn)toast出現(xiàn)在鍵盤的下面，位置不好的話，會正好出現(xiàn)在鍵盤的中間，由于鍵盤是在整個瀏覽器的上層，因此通過z-index的方式是無法將定位的元素覆蓋在鍵盤之上的。解決方案是出現(xiàn)toast的時候，監(jiān)聽所有控件的事件，出現(xiàn)focus的時候，動態(tài)計算當前的位置，重新設置。

• 如果觸發(fā)的input在過于復雜的布局中，某些android機在計算input的實際位置的時候，會出現(xiàn)計算錯誤，特別是通過css設置過trasnlate等高級特性的時候，曾經(jīng)碰到一個機器，由于計算的錯誤，鍵盤彈起的時候，沒有將input框拉伸到鍵盤的上方，完全被鍵盤蓋住，造成輸入問題。因此，由于各種比較齪的android的手機存在的時候，input竟可能不要嵌入過于復雜的層次中，加上比較復雜的css的位置屬性，以免造成計算錯誤。

• 鍵盤的類型 在手機上有各種鍵盤類型，比較常用的鍵盤有全鍵盤，數(shù)字鍵盤，符號鍵盤，email鍵盤，搜索鍵盤，金額鍵盤，電話鍵盤等。不過由于web的限制，能真正使用的可以說非常的有限，并且在ios和android上的實現(xiàn)不同。而且彈出的鍵盤類型也不盡相同?？偨Y(jié)一句話，鍵盤的彈起，完全依賴系統(tǒng)和廠商的實現(xiàn)。鍵盤的類型是無法定制的。

• 鍵盤的事件 彈起和收起鍵盤。這個也是非常糾結(jié)的問題。在ios6之前，當控件獲得focus的時候，如果不是用戶觸發(fā)的事件，鍵盤是不會彈起的，在ios6之后，設置了一個屬性可以做到，在android上，只要不是用戶觸發(fā)的事件都無法觸發(fā)。暫時還沒有解決方案。鍵盤的收起，可以通過js的blur的方式來實現(xiàn)。

頁面滾動

頁面滾動是非常常用的功能，不過在原生手機上，無法支持局部滾動的，不過ios5之后，出現(xiàn)了一個支持局部滾動的CSS屬性，-webkit-overflow-scrolling: touch的屬性，不過里面有一定的缺陷，在某些滾動中，會失效，因此建議不使用。

就頁面需要說一個非常的規(guī)則，因為這個會直接影響web的開發(fā)。就是在頁面進行慣性滑動的時候（手指松開的滑動），處于性能的考慮，瀏覽器是會把頁面上的渲染進行鎖定的狀態(tài)。也就說，當頁面進行滑動的時候，js動態(tài)修改上面的元素是無效的。直到頁面滾動停止，這是個非常特殊的規(guī)則。在IOS和android上都會存在，在ios上顯得突出。在日常評估的時候，一定需要這個特性，這個特性決定了某些滑動中的功能是無法實現(xiàn)的，比如說某個元素到某個位置從static編程fixed的狀態(tài)，或者進行狀態(tài)轉(zhuǎn)換。在滑動的時候，即使js動態(tài)設置了，頁面也不會響應，直到滾動結(jié)束。因此在native中很多觸摸控制的效果，在web上卻無法完美實現(xiàn)。

附注：對于ios的滾動的系統(tǒng)細節(jié)實現(xiàn)可以參考此地址:http://www.iunbug.com/archives/2012/09/19/411.html

頁面滾動有個其他的問題，就是在ios的系統(tǒng)里，就算網(wǎng)頁頭了，還能繼續(xù)往上面拉，有一個力反饋的效果，并且這個效果是無法取消的，看上去很酷和很美。但是在實際項目中，幾乎是用不到這個看上去很美的效果，反而會造成很奇怪的感覺，特別是做成webapp的時候，一個完整的界面有導航頭的時候，還能在往上拉動，極其詭異的感覺對于用戶而言。并且這個滾動是系統(tǒng)實現(xiàn)的，沒有方法去除，因此判斷一個app是web還是native的，就可以通過這種方式來判斷，拉到頂，再往上拉，如果能網(wǎng)上拉，并且出現(xiàn)的不是上拉刷新，而是一個ios的默認背景，則就是web了，不過反之不一定是native，因為web可以直接禁用滾動，通過css3或js來實現(xiàn)模擬滾動，不過這類滾動會造成很嚴重的性能問題，特別是對整個長頁面的滾動。

參考： http://am-team.github.io/amg/dev-exp-doc.html#無線web開發(fā)簡介