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

Question

是否可以将我现有的 HTML/jquery.js 网站转换为面向所有设备（iPhone、Android、黑莓等）的移动应用程序。以下是我能想到的几点。如果我错了，请纠正我。添加 jquerymobile.js 并更改 css 样式（基于访问您站点的设备）。

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

原文由 sajesh Nambiar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

• 创建移动优先的响应式网页设计
• 320 及以上——“小屏幕优先”的响应式样板
• 移动 HTML5 样板
• 来自 Initializr 的 Responsive Mobile First 模板
• 推特引导程序
• 祖布基金会
• 有关更多信息，请参阅： 网页设计框架 的精彩介绍（ Edreih Aldana 的视频）

请记住，如果您的应用程序非常复杂并且最终您可能会得到两个（或更多）代码库，那么它可能并不总是可行或方便，但是大多数网站和 Web 应用程序都可以使用记住这些原则。

还要记住 Web 内容可访问性指南 可以使设计可以在多种设备和多种输入法上工作的网站变得更加容易。

您没有特别要求这样做，但您还可以使用 PhoneGap 将移动网站或 Web 应用程序转换为适用于 iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada 和 Symbian 的实际本机移动应用程序，这样您就可以使用您的应用程序用于从这些特定平台的各种应用程序商店安装。

2016 年更新

我在 2012 年写了这个答案，此后开发了一些相关工具：

• Ionic - 基于 Angular 的混合移动应用程序框架
• React Native - 一个基于 React 构建原生应用程序的框架
• Framework7 - 基于 Dom7 的混合移动应用程序框架（类似于 jQuery）
• 英特尔 XDK （以前称为 appMobi）
• 加速器
• AppGyver
• NativeScript
• 温泉用户界面
• 移动框架比较表 中的更多内容

原文由 rsp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

那么你有两个选择：

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

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

原文由 Alexan 发布，翻译遵循 CC BY-SA 3.0 许可协议