Html 需要将我的基于 HTML5 的 Web 应用程序转换为面向所有移动设备的移动应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11608371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to convert my HTML5 based web application into a mobile app which will target all mobile devices
提问by sajesh Nambiar
Is it possible to convert my existing HTML/jquery.js website into a mobile app that targets all device (iPhone, Android, Blackberry, etc.). Below are the points I can think of. Please correct me if I'm wrong. Add jquerymobile.js and change the css style (based on the device which is accessing your site).
是否可以将我现有的 HTML/jquery.js 网站转换为面向所有设备（iPhone、Android、Blackberry 等）的移动应用程序。以下是我能想到的几点。如果我错了，请纠正我。添加 jquerymobile.js 并更改 css 样式（基于访问您网站的设备）。
What all points should I consider while converting my existing desktop based website into a mobile one. Or should I start creating a mobile website (MVC4 mobile website) from scratch? If that is the case then I have to maintain 2 code bases (1 for desktop and 1 for mobile) which I dont want to do.
在将现有的基于桌面的网站转换为移动网站时，我应该考虑哪些要点。还是应该从头开始创建移动网站（MVC4 移动网站）？如果是这种情况，那么我必须维护 2 个代码库（1 个用于桌面，1 个用于移动），我不想这样做。
Any help or reference will be highly appreciated.
任何帮助或参考将不胜感激。
Cheers, Sajesh Nambiar
干杯，萨杰什·南比亚尔
采纳答案by rsp
You may avoid the need for two code bases if you design your Web app in a device-agnostic way. That means that it can be displayed on many different screen sizes (anything from small mobile phones to plasma TV sets) and navigated using many different input methods (mice, keyboards, touch screens, game pads, etc.). Various techniques to do that are nowadays known as "mobile first" or "responsive design". For a good start, see:
如果您以与设备无关的方式设计 Web 应用程序，则可以避免使用两个代码库。这意味着它可以显示在许多不同的屏幕尺寸上（从小型手机到等离子电视机），并使用许多不同的输入方法（鼠标、键盘、触摸屏、游戏手柄等）进行导航。实现此目的的各种技术如今被称为“移动优先”或“响应式设计”。一个好的开始，请参见：
- Creating a Mobile-First Responsive Web Design
- 320 and Up - the ‘tiny screen first' responsive boilerplate
- Mobile HTML5 Boilerplate
- the Responsive Mobile First templatefrom Initializr
- Twitter Bootstrap
- Zurb Foundation
- For more see: Nice intro to Web Design frameworks(a video by Edreih Aldana)
- 创建移动优先的响应式网页设计
- 320 及以上 - “小屏幕优先”响应样板
- 移动 HTML5 样板
- 在灵活的移动第一个模板从Initializr
- 推特引导程序
- 祖布基金会
- 有关更多信息，请参阅：Web 设计框架的介绍（Edreih Aldana的视频）
Keep in mind that it may not always be possible or convenient if your application is very complicated and in the end you may end up with two (or more) code bases in that case, but most of the websites and Web apps can be built using those principles in mind.
请记住，如果您的应用程序非常复杂，那么它可能并不总是可行或方便，并且在这种情况下最终您可能会得到两个（或更多）代码库，但大多数网站和 Web 应用程序都可以使用牢记这些原则。
Also keeping in mind the Web Content Accessibility Guidelinescan make it much easier to design websites that can work on many devices and with many input methods.
还要记住，Web 内容可访问性指南可以更轻松地设计可以在多种设备和多种输入法上运行的网站。
You haven't specifically asked for this but additionally you can use PhoneGapto convert mobile websites or Web apps to actual native mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian, so you can have your apps available for installation from various app stores for those particular platforms.
您没有特别要求这样做，但另外您可以使用PhoneGap将移动网站或 Web 应用程序转换为适用于 iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada 和 Symbian 的实际本机移动应用程序，因此您可以使用您的应用程序用于从这些特定平台的各种应用程序商店安装。
Update 2016
2016 年更新
I wrote this answer in 2012 and some relevant tools have been developed since then:
我在 2012 年写了这个答案，此后开发了一些相关工具：
- Ionic- a hybrid mobile app framework based on Angular
- React Native- a framework to build native apps based on React
- Framework7- a hybrid mobile app framework based on Dom7(similar to jQuery)
- Intel XDK(formerly known as appMobi)
- Appcelerator
- AppGyver
- NativeScript
- Onsen UI
- More at the Mobile Frameworks Comparison Chart
- Ionic- 基于Angular的混合移动应用程序框架
- React Native- 基于React构建原生应用的框架
- Framework7- 基于Dom7（类似于 jQuery）的混合移动应用程序框架
- 英特尔 XDK（以前称为 appMobi）
- 应用加速器
- 应用Gyver
- 原生脚本
- 温泉界面
- 移动框架比较图表中的更多信息
回答by Alexan
This question was asked 3 years ago and has good answers, I just want to add some info, based on my experience:
这个问题是 3 年前提出的，答案很好，我只想根据我的经验补充一些信息：
It's better not create separate mobile design, but modify existing web with responsive web design using Bootstrap.
最好不要创建单独的移动设计，而是使用Bootstrap使用响应式网页设计修改现有网页。
Then you have two options:
那么你有两个选择：
- Create Hybrid Web App using Apache Cordova, it's almost the same as PhoneGap, mentioned above. I'm using Visual Studio, so I used VS project template.
- Hosted Web App using Manifoldjs. I thinks this option is easy, you just take your existing web site and wrap it, creating Web App.
- 使用Apache Cordova创建混合 Web 应用程序，它与上面提到的 PhoneGap 几乎相同。我使用的是 Visual Studio，所以我使用了VS 项目模板。
- 使用Manifoldjs 的托管 Web 应用程序。我认为这个选项很简单，你只需要把你现有的网站包装起来，创建 Web App。
And if you use Visual Studio, you can create hosted Web App even without Manifilod.
如果您使用 Visual Studio，即使没有 Manifilod也可以创建托管 Web 应用程序。
回答by Redwood
回答by Jeroen
Try the free phonegap build service. You upload your html stuff, and it will automatically generate apps for different devices!
尝试免费的phonegap 构建服务。你上传你的 html 东西，它会自动为不同的设备生成应用程序！
回答by user3268442
You can also try Appery.io to easily build a web app. Here is an article that shows you how to make an iOS app from your website. If your website is responsive, it will automatically target all mobile screen sizes. http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html
您还可以尝试 Appery.io 来轻松构建 Web 应用程序。这是一篇文章，向您展示如何从您的网站制作 iOS 应用程序。如果您的网站是响应式的，它将自动定位所有移动屏幕尺寸。http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html
