需要将基于HTML5的Web应用程序转换为针对所有移动设备的移动应用程序

Question

是否可以将我现有的HTML/jquery.js网站转换为针对所有设备(iPhone,Android,Blackberry等)的移动应用程序.以下是我能想到的几点.如果我错了,请纠正我.添加jquerymobile.js并更改css样式(基于访问您站点的设备).

在将现有的基于桌面的网站转换为移动网站时,我应该考虑哪些要点.或者我应该从头开始创建移动网站(MVC4移动网站)？如果是这种情况,那么我必须维护2个代码库(1个用于桌面,1个用于移动),我不想这样做.

任何帮助或参考将受到高度赞赏.

干杯,Sajesh Nambiar

Answer 1

如果以设备无关的方式设计Web应用程序,则可以避免使用两个代码库.这意味着它可以在许多不同的屏幕尺寸上显示(从小型手机到等离子电视机),并使用许多不同的输入方法(鼠标,键盘,触摸屏,游戏手柄等)进行导航.现在,各种技术被称为"移动优先"或"响应式设计".一个良好的开端,请参阅:

• 创建移动优先响应式Web设计
• 320及以上 - "小屏幕优先"响应式样板
• 移动HTML5 Boilerplate
• 来自Initializr的Responsive Mobile First模板
• Twitter Bootstrap
• Zurb基金会
• 欲了解更多信息,请参阅:网页设计框架的精彩介绍(Edreih Aldana撰写的视频)

请记住,如果您的应用程序非常复杂,可能并不总是可行或方便,最后在这种情况下最终可能会有两个(或更多)代码库,但大多数网站和Web应用程序都可以使用记住这些原则.

另外请记住,Web内容可访问性指南可以使设计可以在许多设备上运行的网站以及许多输入方法变得更加容易.

你没有特别要求这个,但另外你可以使用PhoneGap将移动网站或网络应用转换为iOS,Android,Blackberry,Windows Phone,Palm WebOS,Bada和Symbian的实际原生移动应用程序,这样你就可以使用你的应用程序了从各种应用程序商店安装这些特定平台.

2016年更新

我在2012年写了这个答案,从那时起开发了一些相关的工具:

• Ionic - 一种基于Angular的混合移动应用框架
• React Native - 一个基于React构建本机应用程序的框架
• Framework7 - 基于Dom7的混合移动应用程序框架(类似于jQuery)
• 英特尔XDK(以前称为appMobi)
• Appcelerator的
• AppGyver
• NativeScript
• 温泉UI
• 更多关于移动框架比较图表

Answer 2

这个问题是 3 年前提出的，答案很好，我只想根据我的经验补充一些信息：

最好不要创建单独的移动设计，而是使用Bootstrap使用响应式网页设计修改现有网页。

那么你有两个选择：

1. 使用Apache Cordova创建混合 Web 应用程序，它与上面提到的 PhoneGap 几乎相同。我使用的是 Visual Studio，所以我使用了VS 项目模板。
2. 使用Manifoldjs 的托管 Web 应用程序。我认为这个选项很简单，你只需要把你现有的网站包装起来，创建 Web App。

如果您使用 Visual Studio，即使没有 Manifilod也可以创建托管的 Web 应用程序。