Die Verwendung von Webkit bei der Entwicklung von iPhone / iPod touch-Anwendungen ist gängige Praxis. Das Springen von Kakao zu Webkit und zurück kann für den Benutzer jedoch verwirrend sein. Hier ein paar einfache Tipps zum Theming-Webkit, die wie das UIKit-Framework von Cocoa aussehen.
Was ich hier nacheifere, ist eine UITableView.
Hier ist ein Beispiel aus einer unserer kommenden Anwendungen. Wir verwenden das Webkit hier, um uns zusätzliche Flexibilität zu geben. Wir wollten jedoch das Cocoa UIKit-Gefühl beibehalten:
Hintergrund:
Der grau / weiß gestreifte Hintergrund der iPhone-Anwendung ist allgegenwärtig. Fühlen Sie sich frei, es von hier zu stehlen:
Um diesen Hintergrund in Webkit zu wiederholen, verwenden Sie Folgendes:
Hauptteil {Hintergrundbild: URL ('iphone_back.png'); Hintergrundwiederholung: Wiederholung; -webkit-user-select: keine; -webkit-Textgröße anpassen: keine; Marge: 0;}
Geprägter Kopfzeilentext:
Das iPhone verwendet auf diesem grau hinterlegten Hintergrund häufig geprägten Kopfzeilentext. Mit Safari Text-Schatten, das ist ziemlich leicht zu replizieren. Ich nannte das das Header Klasse. Binden Sie Ihren Text in eine Klasse mit der folgenden CSS ein:
.header {font-weight: fett; Schriftgröße: groß; Farbe: # 4c566c; Text-Schatten: 0px 1.5px 0px Weiß;}
Abgerundete Boxen
In der iPhone-GUI befinden sich natürlich überall abgerundete Boxen. Hier habe ich meine Divs genannt Kurve. Safaris -webkit-border-radius ist ein großartiges Werkzeug dafür. Hier ist ein Beispiel für css, das diesen Effekt liefert.
#kurve {-webkit-border-radius: .5em; border: 1px durchgehend grau; Marge: 5px; Auffüllen: 5px 0px 5px 0px; Hintergrundfarbe: #fff}
Wenn es Interesse gibt, werde ich später mehr Beispiele posten. Bitte teilen Sie Ihre eigene Meinung in den Kommentaren unten mit.