Ich muss meine HTML5-basierte Webanwendung in eine mobile Anwendung umwandeln, die auf alle mobilen Geräte ausgerichtet ist.

Question

Ist es möglich, meine bestehende HTML/jquery.js-Website in eine mobile App zu konvertieren, die für alle Geräte geeignet ist (iPhone, Android, Blackberry usw.). Im Folgenden sind die Punkte, die mir einfallen. Bitte korrigieren Sie mich, wenn ich falsch liege. Fügen Sie jquerymobile.js hinzu und ändern Sie den CSS-Stil (basierend auf dem Gerät, das auf Ihre Website zugreift).

Welche Punkte sollte ich bei der Umwandlung meiner bestehenden Desktop-basierten Website in eine mobile Website beachten? Oder sollte ich mit der Erstellung einer mobilen Website (MVC4 mobile Website) von Grund auf beginnen? Wenn das der Fall ist, dann muss ich 2 Codebasen pflegen (1 für Desktop und 1 für Mobile), was ich nicht tun möchte.

Answer 1

Sie können die Notwendigkeit von zwei Codebasen vermeiden, wenn Sie Ihre Webanwendung geräteunabhängig gestalten. Das bedeutet, dass sie auf vielen verschiedenen Bildschirmgrößen angezeigt werden kann (von kleinen Mobiltelefonen bis zu Plasmafernsehern) und mit vielen verschiedenen Eingabemethoden (Mäuse, Tastaturen, Touchscreens, Gamepads usw.) navigiert werden kann. Verschiedene Techniken, die dies ermöglichen, sind heute als "mobile first" oder "responsive design" bekannt. Für einen guten Start, siehe:

• Erstellen eines Mobile-First Responsive Web Designs
• 320 und höher - der "kleine Bildschirm zuerst"-Reaktionsstandard
• Mobile HTML5 Boilerplate
• die Responsive Mobile First Vorlage von Initializr
• Twitter Bootstrap
• Zurb Stiftung
• Für weitere Informationen siehe: Nette Einführung in Web-Design-Frameworks (ein Video von Edreih Aldana )

Denken Sie daran, dass dies nicht immer möglich oder sinnvoll ist, wenn Ihre Anwendung sehr kompliziert ist, und dass Sie in diesem Fall am Ende vielleicht zwei (oder mehr) Codebasen haben, aber die meisten Websites und Webanwendungen können unter Berücksichtigung dieser Grundsätze erstellt werden.

Auch in Anbetracht der Leitlinien für die Zugänglichkeit von Webinhalten kann die Gestaltung von Websites, die auf vielen Geräten und mit vielen Eingabemethoden funktionieren, erheblich vereinfachen.

Sie haben nicht ausdrücklich danach gefragt, aber Sie können zusätzlich PhoneGap um mobile Websites oder Webanwendungen in echte native mobile Anwendungen für iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada und Symbian zu konvertieren, damit Sie Ihre Anwendungen in verschiedenen App-Stores für diese Plattformen installieren können.

Update 2016

Ich habe diese Antwort im Jahr 2012 geschrieben, und seitdem wurden einige relevante Tools entwickelt:

• Ionic - ein hybrides Framework für mobile Anwendungen, das auf Eckig
• React Native - ein Framework zur Erstellung nativer Anwendungen auf der Basis von Reagieren Sie
• Rahmenwerk7 - ein hybrides Framework für mobile Anwendungen, das auf Dom7 (ähnlich wie jQuery)
• Intel XDK (früher bekannt als appMobi)
• Appcelerator
• AppGyver
• NativeScript
• Onsen UI
• Mehr auf der Mobile Frameworks Vergleichstabelle

Answer 2

Diese Frage wurde vor 3 Jahren gestellt und gut beantwortet, ich möchte nur einige Informationen hinzufügen, die auf meiner Erfahrung beruhen:

Es ist besser, kein separates mobiles Design zu erstellen, sondern eine bestehende Website mit responsivem Webdesign zu modifizieren, indem man Bootstrap .

Dann haben Sie zwei Möglichkeiten:

1. Hybride Webanwendung erstellen mit Apache Cordova ist es fast dasselbe wie das oben erwähnte PhoneGap. Ich benutze Visual Studio, also habe ich VS-Projektvorlage .
2. Gehostete Webanwendung mit Manifoldjs . Ich denke, diese Option ist einfach, nehmen Sie einfach Ihre bestehende Website und wickeln Sie es, die Schaffung Web-App.

Und wenn Sie Visual Studio verwenden, können Sie gehostete Web-App auch ohne Manifilod .

Answer 3

Sie können versuchen PhoneGap eine schnelle Möglichkeit, Ihre Anwendung auf verschiedenen Geräten einzusetzen.

Answer 4

Probieren Sie die kostenlose Phonegap-Erstellungsdienst . Du lädst dein HTML-Material hoch, und es werden automatisch Apps für verschiedene Geräte generiert!

Answer 5

Sie können auch Appery.io ausprobieren, um ganz einfach eine Web-App zu erstellen. Hier ist ein Artikel, der Ihnen zeigt, wie Sie eine iOS-App aus Ihrer Website erstellen können. Wenn Ihre Website responsive ist, wird sie automatisch auf alle mobilen Bildschirmgrößen ausgerichtet. http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html