【问题标题】：Custom CSS for Mobile development using Phonegap/Cordova使用 Phonegap/Cordova 进行移动开发的自定义 CSS
【发布时间】：2013-12-08 02:45:59
【问题描述】：

我计划使用 Cordova v3 开发一个通用应用程序，以使用 HTML/CSS 定位移动设备。为了重用大部分 html 但具有每个移动平台的视觉样式，哪个是最佳解决方案？在这种情况下，哪个是最好的 css/框架（最好是免费的）？

提前致谢。

【问题讨论】：

标签： css cordova cordova-3

【解决方案1】：

正如您所说，“但拥有每个移动平台的视觉风格？”我了解到您正在寻找应用程序中的原生外观。其他答案是很好的框架，但是除非您想花时间调整 css，否则它们看起来与原生 UI （视觉上）不相似。

我曾使用 Twitter bootstrap 和 jQM。到目前为止一切都很好，但对于原生 UI 外观，我将选择以下我认为最好的选项。这些是我花费大量时间寻找 jQM 替代品后的首选，因为我在某些方面对它并不满意。

编辑：我根据我的经验和目前发现的（离子和温泉 ui）添加了两个新选项。

离子框架

http://ionicframework.com/

打算使用 Angular JS 开发混合应用程序是一个真正的宝石。我一直在使用它，它确实帮助我比使用 jQuery 更快地开发。

它也是您可以开箱即用的 UI 元素，它们的样式适用于 iOS 和 Android，尽管我认为它的样式更接近 iOS。

优点

基于 Angular JS 的框架
借助 Angular JS 功能加快开发过程
非常有据可查，有大量示例、教程和食谱。
如果需要，您可以在不使用角度的情况下使用 CSS
免费和开源
主题是通过 CSS 或 SASS 完成的
开箱即用的组件足以开始构建和应用。

缺点

如果您想享受它的所有功能，不妨阅读 ionic 文档和 Angular 关系，但这是值得的。

温泉用户界面

http://s.onsen.io/

我还没有使用它，但它看起来像是混合应用程序的一个非常完整的 UI 选项。

优点

使用 Angular 和 jQuery 效果很好
免费和开源免费和开源
它有一个主题工具，如果您害怕 CSS 或 SASS，可以更轻松地自定义外观。

剑道 UI 移动版

http://www.kendoui.com/mobile.aspx

优点

它可以帮助您使用 Android、iOS、Windows Phone、BB 的原生 UI 外观元素创建原生外观。
包含 MVC 框架
jQM 主题滚轮等主题机
看起来很结实（我期待尽快使用它）
基于 jQuery，因此您可以利用所有 jquery 和 JS 库的强大功能来非常轻松地解决特定问题。

缺点

它不能免费用于商业用途。

PhoneJS

http://phonejs.devexpress.com

优点

基于 jQuery，因此您可以利用所有 jquery 和 JS 库的强大功能来非常轻松地解决特定问题。
可选择支持用于 MVVM 用户界面开发的 Knockout.js

缺点

与剑道相比，它的社区似乎要少得多，所以我不确定有多少人在使用它，这对以后会有帮助。
它不能免费用于商业用途。

巧克力片用户界面

http://chocolatechip-ui.com

优点

iOS 7、Android Jelly Bean 和 Windows Phone 8 UI 外观
开源，项目看起来很活跃
jQuery 兼容
ChocolateChip-UI 使用自己的 JavaScript 库 ChocolateChip，用于 DOM 操作、Ajax 请求等。它与 jQuery 非常相似。（他们声称比 jQuery 和 Zepto 有更好的性能）

缺点

那里似乎没有广泛的社区

类固醇

http://www.appgyver.com/steroids

如果您觉得自己像个探险家，不妨试试类固醇，它与 cordova 兼容，他们声称您的 UI 性能与原生一样好。它很新，我还没有尝试过，但我似乎很有希望，但是由于仍然没有被广泛使用，所以我没有决定使用它，因为当你遇到问题时让很多人使用它会很有帮助。

注意：如果其他人对此或其他用于 cordova/phonegap 的 UI 框架有有趣的替代方案，请分享！

【讨论】：

好消息！我去看看，tx！！
最后你决定选择哪一个？如果信息有用，请考虑投票或接受答案，以便其他人受益。
您确定 Kendo 不能免费用于商业用途吗？我在许可文本中找不到。
他们已经改变了他们的产品和许可证，现在有一个用于商业和非商业应用程序的 kendo ui 移动开源版本。

【解决方案2】：

我的建议是支持市场上几乎所有移动设备的 jQuery Mobile。

支持设备列表：http://jquerymobile.com/gbs/

1) 它为每个设备平台提供原生感觉。 2) 支持所有平台 3) 简单的支持和 3rd 方插件

有人说 jQuery mobile 可能很慢。但您可以调整它的设置以使其变得更好。

【讨论】：

几个月前，我们开始了一个新项目，并考虑了上面列出的所有客户端框架选项。我们正在寻找大量针对移动设备优化的 UI 小部件。对我们来说，小部件目录比框架是否提供 MV* 架构更重要，因此 AngularJS、MeteorJS 和 EmberJS 等工具是次要的。我们发现 jQueryMobile 是我们的最佳选择。 Bootstrap、Ionic、Kendo、Sensa 等似乎没有专门针对移动设备的那么多和多样的开箱即用小部件。到目前为止，我认为我们为我们的用例做出了最好的决定。

【解决方案3】：

您可以使用Onsen UI。它声称比 jQuery 更快，并拥有自己的主题滚轮，并且与 PhoneGap/Cordova 兼容。

【讨论】：

【解决方案4】：

尝试使用 twitter 引导程序，http://getbootstrap.com..
可能是您的解决方案，因为 twitter bootstrap 是适用于所有设备的 html 和响应代码的框架，请在 http://quirktools.com/screenfly.. 中检查分辨率网络，您可以使用 phonegap 转换网络。..

【讨论】：