2010-07-10 5 views
7

La mia app contiene UIWebView. Quando l'app ruota da verticale a orizzontale o viceversa, il peso del carattere appare leggermente modificato. Sia il testo in grassetto che il testo normale diventano leggermente più audaci nel panorama e leggermente più sottili nel ritratto.Il font UIWebView è più sottile in verticale rispetto al paesaggio

Questo non sembra essere il caso in Safari, solo nella mia app. Ecco un'immagine di esempio, presa come uno screenshot sull'iPad. Ho ruotato e ritagliato una sezione di esempio.

alt text http://dl.swankdb.com/font-change-example.png

Ho il seguente CSS configurato, ma sembra per evitare che la modifica delle dimensioni del carattere drastico, non il sottile cambiamento di peso che sto osservando:

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
} 

Qualcuno può spiegare questo? Il simulatore non lo fa, ma il mio iPad, iPhone 3GS e iPhone 4 lo hanno tutti. Ho anche ricevuto segnalazioni da parte dei clienti che succede loro, quindi so che non è nella mia testa!

+1

Il proprio frammento ha risolto i problemi di carattere per me! –

risposta

3

Ebbene dopo aver trascorso una quantità ridicola di tempo cercando di capire questo fuori ho trovato una soluzione:

Utilizzare questa:

html {

-webkit-font-smoothing: none;

}

+0

Sì, questo funziona per me. Grazie! – Echelon

16

Ho visto questo in Safari per sé anche con una web app che sto mettendo insieme. Dopo un giorno o di grattarsi la testa, e decostruire il CSS utilizzato dalla Guida per l'utente iPad, ho scoperto che

-webkit-transform: translate3d(0,0,0); 

fa il trucco. Cercare su Google è come se questo consentisse l'accelerazione hardware del rendering che porta a risultati molto più coerenti in termini di orientamento verticale e orizzontale.

+0

Grande scoperta! Grazie. – canisbos

+0

Grazie mille, questo migliora enormemente il rendering sui font picto/icon. –

2

Il motivo è che solo una modalità può utilizzare i subpixel nel display, perché sono disposti in una determinata direzione. L'altra modalità visualizzerà il carattere con anti-aliasing di greyscaled e apparirà leggermente diverso.

Problemi correlati