webkit gotchas for android/iphone development

Question

如果我想用js，css，html開發移動應用程序的前端，以便同時定位Android和iPhone，那麼我需要注意哪些陷阱？

儘管我關心性能和開發問題，但我並不是在尋找本地和web開發的比較。

Answer 1

我一直在做相當數量的研究，下面是我發現的幾個主要問題。

• 觸摸事件在不同設備間不一致。
• 沒有任何好方式來執行固定位置。對於簡單的標題欄，這將是必需的。
• 目前沒有支持多個分辨率設備的框架，即UI在新的iPhone 4視網膜顯示器上看起來像素化。移動設備具有少量內存和較慢的CPU，使用任何主流JavaScript框架顯着降低性能（包括jQuery）。
• 確保您使用WebKit動畫/轉換，而不是在JavaScript中執行動畫（這是利用硬件加速）。

我現在想不到更多，但是當我做我會讓你知道。

Answer 2

1. Android系統目前不具備在瀏覽器硬件加速，但情況正在發生變化在3.0 - http://android-developers.blogspot.com/2011/03/android-30-hardware-acceleration.html。

2. 如果您正在使用本機滾動（此時首選Android），請確保正確處理觸摸，以便在滾動touchstart時不會立即打開新視圖。

3. LocalStorage速度很快。您可以使用JSON的字符串化和解析將JSON存儲在LocalStorage中。使用SQLite的HTML數據庫比較慢。

4. Sencha是美麗的，但限制。 jQueryMobile擁有強大的功能集支持基礎，但仍然有問題。

5. Google Closure編譯器在PhoneGap和其他庫方面存在問題。可能想使用YUICompressor。

6. 在Android中，使用地圖和菜單的原生選項。地圖是谷歌地圖的鏈接。菜單是一個按鈕的風格化列表（請參閱jQueryMobile）。

7. 使用模板引擎，如小鬍子或把手。把手允許邏輯和助手，加上所有的好吃的小鬍子用品。

8. CSS3表格是100％靈活內容桶的朋友。

9. 查看Github中的PhoneGap插件。我爲Android爲我工作的公司編寫了一個ContactView - http://www.reardencommerce.com，我們正在javascript和node.js中構建html5應用程序。

10. AJAX跨域或從本地文件系統工作在移動。它也適用於Safari Mac，只有當您從file：//協議中讀取應用程序。

11. 您可以在Chrome windows/mac中更改設置以允許跨域AJAX，但會降低您的安全級別。你可能會感染病毒。

12. 太多的CSS3漸變大大減慢你的應用程序。

13. 使用CSS3拖放陰影，漸變和圓角在Android上並不漂亮。