Lernen Sie, wie Sie für das iPhone entwickeln

Heute zeige ich Ihnen, wie Sie eine alternative Seite und ein Stylesheet für iPhone und iTouch erstellen. Wir zeigen Ihnen, wie Sie feststellen können, ob der Benutzer Ihre Seite mit einem iPhone betrachtet, und wie das Gerät ausgerichtet ist - ob im Querformat oder im Hochformat. Um dies zu erreichen, verwenden wir Javascript und einige für Safari mobile spezifische CSS-Tags.

Fertig machen

Wir fangen mit 2 Psds an, die ich gemacht habe, und bringen diese auf einer iPhone-Seite zum Laufen. Ich verwende Bilder für den Hintergrund und die Kopfzeile, obwohl Sie anstelle von Bildern nur gerade Farben verwenden könnten. Der Vorteil der Nichtbenutzung von Bildern ist, dass sie offensichtlich schneller lädt, aber auch beim Wechsel zwischen Quer- und Hochformat dauert das Laden der Bilder einen Moment, je nachdem, wie groß sie sind. Sie können die Quell-PSD-Dateien hier finden oder eigene Dateien erstellen. Zu beachten ist, dass wir eine Seite speziell für das iPhone oder iTouch erstellen. Wenn Sie das Gerät nicht selbst haben, können Sie das iPhone SDK kostenlos von Apple herunterladen. Es enthält einen iPhone-Simulator. Wenn Sie das iPhone auf Ihrer Standard-Browserseite erkennen und entweder das iPhone css und html über bedingte Anweisungen laden oder den Benutzer vollständig auf eine andere Seite senden möchten, verwenden Sie den folgenden Code:

Der Code oben erklärt:

Zeile 2: Erstellen Sie eine Variable, die den Browsertyp des Benutzers enthält (unter anderem)
Zeile 3: Weisen Sie dem Browsertyp einen Wert zu, wenn der iPhone-Browser vorhanden ist.
Zeile 4 - 8: Eine if-Anweisung, die den Benutzer auf eine "iPhone-formatierte Seite" umleitet, wenn die Variable "users_browser" einen Wert zurückgibt (dh der Benutzer verwendet ein iPhone oder iTouch, um die aktuelle Seite anzuzeigen)..

Unter dem Code werden html-Bedingungsanweisungen verwendet, um den Code in einem normalen Browser auszublenden.

Schritt 1: Das HTML

Wir wissen jetzt, wie Sie den Benutzer auf Ihre iPhone-Seite verweisen können, wenn er sich auf einem iPhone oder einem iTouch-Gerät befindet. Jetzt beginnen wir mit der Arbeit an der iPhone HTML-Seite. Der folgende Code weist einige wichtige Unterschiede zu einem regulären XHTML-Übergangsdokument auf.

     Meine iPhone-Seite

Der Code oben erklärt Zeile für Zeile:

Zeile 1 - 5: Dies ist der Standard 1.0 XHTML Transitional Doctype. Noch nichts Besonderes.
Zeile 6: Diese Zeile ist für iPhone und iTouch spezifisch. Sie legt die Anfangswerte für das Ansichtsfenster im Browser des Geräts fest. width = Gerätebreite gibt die Breite der Seite als die gleiche Breite des Geräts an. Anfangsskala und Maximalskala legen den Startpunkt für den Zoom der Seite fest. Die Maximalskala gibt an, um wie viel die Seite vergrößert werden kann.
Zeile 9: Dieses Linkelement zeigt auf das Webseitensymbol. Dies wird verwendet, wenn ein Benutzer die Seite auf seinem "Startbildschirm" speichert..
Zeile 10: Ein Linkelement zeigt auf das iPhone-Stylesheet. Diesem Element ist die ID orient_css zugewiesen. Dies ist so, dass wir mit Javascript darauf verweisen können, um die CSS-Datei zu ändern, auf die sie verweist, wenn das Layout an die Ausrichtung des Geräts angepasst wird.

Schritt 2: Auslegen der Divs

Wir fahren jetzt mit dem Rest der HTML-Datei fort, bevor wir Javascript-Funktionen zur Orientierungserkennung hinzufügen. Beginnen Sie mit dem Ende des Kopfes und starten Sie dann den Körper. Im body-Element fügen wir onorientationchange = orient (); hinzu. Ich habe also gerade gelogen, das ist ein bisschen Javascript, aber dies ist notwendig, um unsere "Orient" -Funktion aufzurufen (wir werden dies ein bisschen durchgehen), wenn das Gerät eine andere Ausrichtung erkennt.

     
  Dies ist der Hauptinhaltsbereich der Seite. 
 Mit css und javascript können wir diese divs mit einer alternativen css-Datei bearbeiten. Die CSS-Dateien in diesem Projekt sind für Quer- und Hochformatansichten gedacht.
 Etwas mehr Fülltext hier, um die Seite zu veranschaulichen.

Schritt 3: Die Orientierung Javascript

Im Kopf der Seite möchten Sie den unten gezeigten Code einfügen

switch (window.orientation) arbeitet mit der onorientationchange () -Methode im body-Element. Dadurch wird geprüft, ob die aktuelle Drehung dem "case value" entspricht. Wenn true zurückgegeben wird, wird das nach dem Doppelpunkt ausgeführt. Nachdem eine Ausrichtung abgeglichen wurde, bricht sie aus orient () ;. window.onload () führt die Orientierungsfunktion aus, wenn das Laden der Seite abgeschlossen ist.

Nach jedem Fall (Wert): Wir haben Javascript, das auf die Linkelement-ID verweist, an die unsere CSS-Datei angehängt ist. Abhängig von der Groß- / Kleinschreibung 0, 90 oder -90 (es gibt auch 180, wird auf dem iPhone jedoch derzeit nicht unterstützt), wird die css-Datei im Hoch- oder Querformat an den href-Tag im link-Element angehängt. 0 ist aufrecht (Hochformat), 90 ist gegen den Uhrzeigersinn ausgerichtet. -90 ist ein Querformat im Uhrzeigersinn und 180, obwohl es noch nicht unterstützt wird.

Schritt 4: Implementieren des CSS

Trotz des gesamten Codes macht die Seite nicht viel. Das liegt daran, dass wir Hintergrundbilder hinzufügen und alles neu gestalten müssen. Wir erstellen 2 CSS-Dateien, eine namens iphone_portrait.css und eine andere namens iphone_landscape.css. Wir werden die Portrait-CSS-Datei als Standard-CSS-Datei in das Link-Element einfügen.

 Körper Hintergrundfarbe: # 333; Rand oben: -0px; Rand links: -0px;  #wrap overflow: auto; Breite: 320px; Höhe: 480px;  #header background: URL (… /images/header.jpg); Hintergrundwiederholung: keine Wiederholung; Höhe: 149px;  #content background: url (… /images/middle.jpg); Hintergrundwiederholung: Wiederholung-y; Rand oben: -5px;  p Marge: 5px; Polsterung links: 25px; Breite: 270px; Schriftgröße: 10px; Schriftfamilie: arial, "San Serif";  #bottom background: url (… /images/bottom_corners.jpg); Hintergrundwiederholung: keine Wiederholung; Höhe: 31px; Rand oben: -5px;

Der obige Code bezieht sich auf die Datei iphone_portrait.css und ist recht unkompliziert. Einige Dinge zu beachten sind:

Überlauf in der Wrap-Style-Beschreibung: auto sorgt dafür, dass gleitende Elemente im Wrap-Div gehalten werden, um die Seite ordentlich zu halten.
Die Abmessungen für die Seite sind 320 Pixel breit und 480 Pixel hoch. Achten Sie darauf, dies im Wrap-Div anzugeben.

Unten ist der Code, der in die Datei iphone_landscape.css eingefügt werden soll. Die einzigen Unterschiede zwischen Hoch- und Querformat-CSS-Dateien sind die Hintergrundbilder, die Umbruchmaße werden umgekehrt und die Ränder werden entsprechend angepasst.

 Körper Hintergrundfarbe: # 333; Rand oben: -0px; Rand links: -0px;  #wrap overflow: auto; Breite: 480px; Höhe: 320px;  #header background: url (… /images/l_header.jpg); Hintergrundwiederholung: keine Wiederholung; Höhe: 120px;  #content background: url (… /images/l_middle.jpg); Hintergrundwiederholung: Wiederholung-y; Rand oben: -5px;  p Marge: 5px; Polsterung links: 25px; Breite: 370px; Schriftgröße: 10px; Schriftfamilie: arial, "San Serif";  #bottom background: url (… /images/l_bottom_corners.jpg); Hintergrundwiederholung: keine Wiederholung; Höhe: 37px; Rand oben: -5px;

Wenn Sie meine aufgeschnittenen Hintergrundbilder verwenden, sollte Ihre Seite im Hochformat jetzt wie das folgende Bild aussehen.

Oder im Querformat?

Wohin geht es von hier aus??

Nun, da Sie eine Seite haben, die für iPhone und iTouch formatiert und gestaltet ist, was können Sie sonst noch tun? Wenn Ihre Seite eher eine Web-App sein soll, sollten Sie sich die IUI von Joe Hewitt ansehen, ein Rahmen, der Ihre Seiten wie native iPhone- oder iTouch-Apps aussehen lässt. Denken Sie auch daran, dass Sie 3 spezifische CSS-Dateien festlegen können. Sie können also eine CSS-Datei haben, die die Seite formatiert, wenn sie im Uhrzeigersinn in Querformat und eine andere Datei erneut formatiert wird, wenn sie im Gegenuhrzeigersinn in Querformat gedreht wird. Dies wird einige interessante Ergebnisse ermöglichen. Viel Glück!

Code