L'utilizzo di webkit nello sviluppo di applicazioni per iPhone / iPod touch è una pratica comune. Tuttavia, saltare dal cacao al webkit e viceversa può essere fonte di confusione per l'utente. Ecco alcuni semplici suggerimenti per il Webkit tematico per assomigliare al framework UIKit di Cocoa.
Nello specifico, ciò che sto emulando qui è un UITableView.
Quindi, ecco un esempio da una delle nostre prossime applicazioni. Stiamo usando il webkit qui per darci una maggiore flessibilità. Tuttavia, volevamo mantenere la sensazione di Cocoa UIKit:
Sfondo:
Lo sfondo grigio / bianco dell'applicazione iphone è onnipresente. Sentiti libero di rubarlo da qui:
Per ripetere questo background nel webkit, usa qualcosa di simile a questo:
body {background-image: url ('iphone_back.png'); background-repeat: repeat; -webkit-user-select: none; -webkit-text-size-adjust: nessuno; margine: 0;}
Testo dell'intestazione in rilievo:
L'iphone usa frequentemente il testo dell'intestazione in rilievo su questo sfondo grigio spogliato. Usando safari text-shadow, questo è abbastanza facilmente replicabile. Ho chiamato questo il intestazione classe. Avvolgi il testo in una classe con il seguente css:
.header {font-weight: bold; dimensione del carattere: grande; colore: # 4c566c; text-shadow: 0px 1.5px 0px bianco;}
Scatole arrotondate
Ovviamente, le caselle arrotondate sono ovunque nella GUI di iPhone. Qui ho chiamato i miei div curva. Safari -webkit-border-radius è un ottimo strumento per questo. Ecco un esempio di css che fornirà questo effetto.
#curve {-webkit-border-radius: .5em; border: 1px grigio fisso; margine: 5px; imbottitura: 5px 0px 5px 0px; background-color: #fff}
Se c'è interesse, pubblicherò altri esempi più tardi. Sentiti libero di condividere il tuo nei commenti qui sotto.