摘要：缺少標準是里面一項非常重要的改進，大大改善了布局工作。為了提升用戶體驗，我們多數(shù)使用事件部分替代事件，以便及時響應用戶操作。不過要注意，在響應時，會自動觸發(fā)它的元素的，所以要用新增的屬性進行二次對比，以免誤傷。

  
首發(fā)我的博客：Android Hybrid App四大坑

首先解釋下題目，Hybrid App，混合應用，代表平臺PhoneGap，一般指使用原生包裝Web頁面開發(fā)的應用。與原生應用相比，主要用戶界面和業(yè)務邏輯都是用Web技術也就是HTML+CSS+Javascript實現(xiàn)的；與Web應用相比，Web部分打包在應用內部，使用時不需要網(wǎng)絡。

順便說一句，很多解決方案其實不算Hybrid，比如Adobe AIR、Titanium、Mono，這些都是使用某一特定技術開發(fā)跨平臺應用的工具，最終產(chǎn)品都是編譯成原生來跑的。

我們沒有選擇PhoenGap為技術基礎（我對此并不滿意，我認為以PhoneGap為基礎可以少走一些彎路，少花一些精力，還能產(chǎn)出很多有價值的副產(chǎn)品），而是自行開發(fā)原生框架，主要目標平臺是Android——嗯，就是那個從系統(tǒng)版本到模塊組合都巨分散的Android，可以這么說，坎坷從立項的那一刻起就已經(jīng)注定了……接下來，便請聽我一一講述：Android Hybrid App四大坑。（此文主要針對Android 4.3及之前的webview，部分瀏覽器比如Chrome已經(jīng)改善了具體實現(xiàn)，所以Web App其實環(huán)境不錯。）

前端代碼開源就好，https://github.com/Dianjoy/gamepop，要跑起來需要修改config.js，把if (debug) {}的內容刪掉。

Flexbox是CSS3里面一項非常重要的改進，大大改善了布局工作。可惜從草案到終案時間跨度太長，于是市面上絕大部分設備只支持display:-webkit-box。這給上圖中圖標區(qū)域的布局帶來了難處，最終只能混合使用兩種布局，display:inline-block和display:flex。需要注意，inline-block元素之間，如果在代碼中有空格換行符的話，渲染時會有約0.25em~0.5em大小的間隙，所以想一行4列每列width:25%的話會放不下導致折行。開始我在其父元素中設置font:0/0 a，大部分手機都OK，中興ZTE795就不行，擦，上次也是它……后來我索性把所有空格和換行符都干掉，終于OK了。

這段代碼演示inline-block布局時父元素字體對子元素之間間歇的影響。

所以，對于多行多列的grid布局，我們要謹記：

對父元素使用display:flex; flex-direction: row; flex-wrap: wrap;在現(xiàn)代瀏覽器和Android4.4以上的系統(tǒng)中，可以取得完美表現(xiàn)。
使用display:inline-block; box-sizing: border-box; vertical-align: top;，并且在代碼中移除塊與塊之間的空白字符，避免換行，保留合適的邊距。
遺憾的是，低版本的webview中，高度不會自適應，除非使用js進行計算，不然還是盡量避免在元素下方畫線的舉動。

（這個問題簡直令人發(fā)指。）我們知道，很多瀏覽器默認行為都依賴click事件觸發(fā)，比如超鏈接、input[type=radio]的選中，等等。在4.4之前的webview中，click比真實操作延遲約300ms觸發(fā)，會帶給用戶明顯的延滯感。為了提升用戶體驗，我們多數(shù)使用tap事件部分替代click事件，以便及時響應用戶操作?？蛇x方案很多，Hammer.js、Fastclick，甚至Zepto都有封裝。

于是新的問題出現(xiàn)了。比如我們用實現(xiàn)了一個刪除按鈕，tap時，刪除當前元素，并且將按鈕重置為下載按鈕，href為下載的url。用PC開發(fā)時一切正常，但到真機測試就會發(fā)現(xiàn)，因為tap是即時的，新按鈕立刻替換了舊按鈕，300ms后，click事件在新按鈕上觸發(fā)了，結果又開始下載……再比如，圖層中有個后退按鈕，點擊后，圖層移除，露出下面覆蓋的部分，如果在tap的位置上剛好有一枚鏈接，此時就會觸發(fā)click，頁面跳轉……以及，上次總結說的下載鏈接不觸發(fā)click，問題也一樣，只不過翻過來，click該觸發(fā)的時候，被圖層擋住了，所以沒有觸發(fā)。