Web-Anwendung auf einem iPhone - styling es aussehen wie native iPhone App

Ich sah einige Webseiten anders auf einem iPod Touch (und iPhone) anzeigen - sie sah so ziemlich aus wie die nativen iPhone-Apps.Web-Anwendung auf einem iPhone - styling es aussehen wie native iPhone App

Denken Sie, dass dies mit Stilen und optional Rendering diffrent HTML auf der Serverseite, basierend auf dem User-Agent von Anfrage getan werden kann.

Also, wie bekomme ich diesen Effekt? Und gibt es auch irgendeinen Emulator des iPhone OS Browsers, also könnte ich meine Anwendung testen, bevor ich sie wirklich starte, um zu sehen, ob sie überhaupt angezeigt wird?

Quelle

2009-11-02 kender

iui ist eine gute Lösung, aber ich schlage auch http://www.jqtouch.com/ vor, die auf jquery basiert. Es wächst radiply. Und Sie können auch die Google-Gruppe verwenden http://groups.google.com/group/iphonewebdev

Quelle

2009-11-02 18:52:35

definitiv die beste Sache zu verwenden. –

großartige Sache, danke. Ich werde jQuery in diesem Projekt verwenden, also werde ich es versuchen. – kender

Nie zuvor gesehen; Ich werde das auf jeden Fall überprüfen. – tahdhaze09

Sehen Sie hier für Informationen über Joe Hewitt CSS und JavaScript für native aussehende iPhone Web-Anwendungen: http://ajaxian.com/archives/iphone-native-looking-skin

Um das Aussehen und das Gefühl von einer Webseite auf dem iPhone zu simulieren, können Sie dies versuchen: http://www.testiphone.com/. (Aber natürlich, wenn Sie es ernst meinen, verwenden Sie einen echten iPhone oder iPod Touch.)

Quelle

2009-11-02 18:42:27

ich die testiphone Website mit einem Webkit-Browser, da der iPhone-Browser auf Webkit basiert verwenden würde. Das sollte Ihnen die beste Annäherung an den tatsächlichen iPhone Browser geben. –

http://code.google.com/p/iui/

Quelle

2009-11-02 18:44:51 tahdhaze09

die alle CSS/Javascript Funktionen, die Sie benötigen, sind auf der Apple Developer Website dokumentiert.

starten hier: http://developer.apple.com/safari/

Apple eine Reihe von PDF-Dateien, die beschreiben, was Sie für das iPhone und iPod anpassen tun müssen.

Obwohl Sie Safari für Windows und Mac herunterladen können - es wird nicht die gleiche Auflösung wie ein iPhone oder iPod eingestellt haben.

Quelle

2009-11-02 18:46:35 daf

Sie können das jqtouch Framework verwenden, damit Ihre Webseiten aussehen und sich wie eine native iPhone-Anwendung verhalten. Der Autor hat einen Link zu einer Demo auf seiner Homepage, die Sie mit Ihrem iPhone auschecken können.

In Bezug auf Tests: Apple hat ein iPhone SDK können Sie herunterladen, wenn Sie sich als Apple-Entwickler angemeldet haben. Aber zur Zeit teste ich gerade indem ich mein iPhone auf meinen Dev-Server zeige.

Quelle

2009-11-02 18:55:23

das ist das Problem, wenn ich nicht wirklich das iPhone bekommen habe :) – kender

Sie wären gut beraten, eine zu bekommen, wenn Sie iPhone-Websites tun werden. Der Simulator ist großartig und alles, aber es ist viel schneller als ein echtes iPhone (und hat manchmal andere Probleme als das echte Ding). – ceejayoz

Ich werde sicher einen bekommen (wahrscheinlich iPod touch obwohl ich kein anderes Telefon brauche). Die Web-App ist kein reines iPhone. Es ist nur eine Idee, sie für iPhone-Nutzer app-ähnlich zu machen. Also, bevor ich es live laue ich würde das eigentliche Gerät, aber bevor es nur eine weitere Ausgabe ist, kann ich vermeiden :) – kender

Apples iPhone SDK enthält einen iPhone Simulator, mit dem Sie Ihre Seiten auf einer echten Version von Mobile Safari testen können. Ich glaube, dass die Software nur für Mac OS X ist.

OS X 10.5 iPhone SDK Download

Sie werden mit Ihren iTunes-Anmeldeinformationen authentifizieren, um den Download zu erhalten.

Quelle

2009-11-02 19:45:07 gkj4444

Wenn Sie X-Code und Dashcode installiert haben, dann ist der iPhone-Simulator mit dabei. Ich bin faul ich fange einfach an und leere das Projekt für das iPhone in Dashcode und starte es und der Simulator erscheint. – PurplePilot

Wenn Sie einen Mac besitzen, sollten Sie versuchen, versuchen Sie Dashcode (die ein Teil des iPhone SDK ist).

Quelle

2009-11-02 20:54:13 Linas

Ich arbeite derzeit mit dem Entwicklerteam von iUI an dem aktuellen CSS-Stil für das Projekt und ich muss sagen, ich bin ziemlich beeindruckt von der Kraft des kleinen Broswers. Die meisten Webkit-Funktionen stehen dem Endbenutzer zur Verfügung, einschließlich -Webkit-Gradienten, so dass Sie die meisten Elemente der Benutzeroberfläche mit Nullbildern aus dem Weg räumen können. Während Sie die Seite basierend auf der User-Agent-Zeichenfolge unterschiedlich rendern können, empfehle ich Ihnen, davon abzulenken, da Sie das iPhone mit einem Stylesheet-Parameter ausrichten können.

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

Damit können Sie das gleiche HTML-Markup verwenden und ändern, wie es für Ihr iPhone aussieht.

Für iPhone OS Emulators, apple has you covered, über auf der Windows-Seite ist es Safari, und vergessen Sie nicht, die useragent zu iPhone in den Entwicklungsoptionen zu ändern. Ich benutze jedoch Chrome, da es auch die Webkit-Engine verwendet, so dass die meisten CSS syntaktisch identisch sind.

Allerdings haben die meisten Menschen ein iTouch oder iPhone, wenn Sie diese Art von Dev arbeiten. Am besten testen Sie das 2G-Telefon, da es die höchste Einschränkung aufweist (und die langsamste aller CPUs). Dies gibt Ihnen einen Fall, wenn Sie akzeptabel finden, wird nur besser für die Menschen mit 3G und 3GS.

Einige große Ressourcen zu den Themen gehören:

Apple's Webapps Page

Apple's Developer Safari Page - Einen Link zu iPhone Simulator (NUR MAC) Enthält.

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

UNBEDINGT LESEN: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Submit your WebApp

Quelle

2009-11-03 05:36:44