Använda webkit i iPhone / iPod touch är programutveckling en vanlig praxis. Hoppning från kakao till webkit och baksida kan dock vara förvirrande för användaren. Här är några enkla tips för att skapa webbkit för att se ut som Kakaos UIKIT-ramverk.
Specifikt, det jag emulerar här är en UITableView.
Så här är ett exempel från en av våra kommande applikationer. Vi använder webkit här för att ge oss extra flexibilitet. Men vi ville behålla kakao UIKit känner:
Bakgrund:
IPhone applikationen grå / vit randig bakgrund är allestädes närvarande. Känn dig fri att stjäla den här härifrån:
För att upprepa denna bakgrund i webbkit, använd något så här:
kropp {bakgrundsbild: url ('iphone_back.png'); bakgrundsrepetition: repetera; -webkit-användar-välj: ingen; -webkit-text-size-adjust: none; marginal: 0;}
Präglad rubriktext:
IPhone använder ofta präglad rubriktext på den här gråfärgade bakgrunden. Med safari text-shadow, det här är ganska enkelt att replikeras. Jag ringde detta till rubrik klass. Vik din text i en klass med följande css:
.header {font-weight: bold; typsnittstorlek: stor; färg: # 4c566c; textskugga: 0px 1.5px 0px vit;}
Rundade rutor
Naturligtvis är avrundade lådor överallt i iPhone GUI. Här har jag ringt mina divs kurva. Safaris -webkit-border-radius är ett bra verktyg för detta. Här är ett exempel på css som kommer att ge denna effekt.
#curve {-webkit-border-radius: .5em; border: 1px solid gray; margin: 5px; vaddering: 5px 0px 5px 0px; bakgrundsfärg: #fff}
Om det finns intresse, lägger jag in fler exempel senare. Var god och dela med dig av dig själv i kommentarerna nedan.