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上并不漂亮。