用于android / iphone开发的webkit陷阱

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的stringify和parse将JSON存储在LocalStorage中。使用SQLite的HTML数据库速度较慢。

4. Sencha很漂亮但很有限。 jQueryMobile拥有强大的支持基础和强大的功能集，但仍然有问题。

5. Google Closure Compiler与PhoneGap和其他库存在问题。可能想使用YUICompressor。

6. 在Android中，使用地图和菜单的原生选项。地图是谷歌地图的链接。菜单是列表样式化按钮（请参阅jQueryMobile）。

7. 使用像Mustache或Handlebars这样的模板引擎。把手允许逻辑和助手，以及所有好吃的胡子供应。

8. CSS3表是您100％灵活内容存储桶的朋友。

9. 查看Github中的PhoneGap插件。我为我工作的公司编写了一个针对Android的ContactView - http://www.reardencommerce.com，我们在javascript和node.js中构建html5应用程序。

10. AJAX跨域或本地文件系统适用于移动设备。只有从file：// protocol中读取应用程序时，它才适用于Safari Mac。

11. 您可以在Chrome windows / mac中更改设置以允许跨域AJAX，但会降低您的安全级别。你可能会感染病毒。

12. 太多CSS3 Gradients会大大降低您的应用速度。

13. 使用CSS3投放阴影，渐变和圆角在Android上并不常见。