Dimensioni dei caratteri incoerenti sugli smart phone

Question

Sto modificando una pagina Web in modo che sia buona per gli smartphone. Ho dichiarato una sezione @media nel file CSS in modo da poter specificare le dimensioni del carattere per questa pagina. Ecco la sezione media:

@media screen and (max-device-width: 640px) { 
    #TermsOfUse { 
     padding: 0 2em 0 2em; 
     margin-left: auto; 
     margin-right: auto; 
     color: #777; 
     font: small sans-serif; 
    } 

    #TermsOfUse p { 
     color: #777; 
     font-weight: bold; 
     font: small sans-serif; 
     padding-top: 1em; 
     padding-bottom: 1em; 
    } 

    #TermsOfUse #trademark_footer p { 
     font: xx-large sans-serif; 
    } 
} 

Tuttavia, le dimensioni dei caratteri vengono visualizzate in modo incoerente. L'ho detto di mostrare i caratteri "piccoli", ma una sezione continua a mostrare i caratteri in una dimensione molto più piccola (id = "trademark_footer" in basso). L'uso di "xx-large" non rende nemmeno il carattere grande quanto il carattere "piccolo" nel resto della pagina. Sto visualizzando la pagina su Chrome su Android.

Inoltre, quando visualizzo questa pagina nel seguente simulatore, tutti i tipi di carattere sull'intera pagina sono minuscoli, troppo piccoli per essere letti.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

primo luogo, perché è il tipo di carattere del marchio nella parte inferiore della pagina rivelando molto più piccoli dei font sul resto della pagina (Chrome su Android)?

In secondo luogo, perché tutti i caratteri sono così piccoli nel simulatore iPhone?

Tutto quello che sto cercando di realizzare è quello di mostrare tutti i caratteri in una dimensione leggibile su tutti gli smartphone.

UPDATE:

Quando ho specificare le dimensioni dei caratteri in modo esplicito, io ho lo stesso problema. Se specifichi 13px, ad esempio, per il carattere principale, devo specificare qualcosa intorno a 30px sul marchio affinché appaia con una dimensione simile.

Stessa cosa se uso "em" s.

UPDATE:

ho appena provato in default (credo) del browser sul mio Samsung Galaxy S2 e che mostra il piccolo carattere, troppo-così piccolo è illeggibile. A proposito, nel browser Adroid predefinito, posso toccare due volte, e si espande in una bella dimensione.

provato questo e non sembra fare la differenza:

body { 
    -webkit-text-size-adjust: none; 
} 

Answer 1

ho avuto uno sguardo alla fonte di quella pagina e non ho potuto vedere la

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Quando ho guardato il mio iphone, non sembra che la pagina sia stata ridimensionata, suggerendo che il dispositivo sta interpretando la dimensione della pagina e pertanto nessuna delle query sui media avrà effetto.

L'aggiunta del meta tag viewport dovrebbe attivare le query multimediali e le modifiche del carattere che si stanno cercando.

info on the viewport tag

Answer 2

Si tratta di un lungo tiro, ma può aiutare un po '.

Ho aperto http://inrix.com/traffic/Privacy con un iPhone4 (iOS 5.0.1) e infatti il ​​font è veramente piccolo.

Dai un'occhiata a questo page 's @media s (Potresti anche vedere lo HTML5 Boilerplate's template potresti essere in grado di scavare qualcosa da lì anche per quanto riguarda il tuo problema). Non ho alcun problema di dimensione dei caratteri e ho provato il il link precedente su Chrome (versione 26.0.1410.64 m), iOS 5.0.1 (9A405) e Android 2.3.6 con entrambi gli orientamenti (nei telefoni) . Forse potresti scavare qualcosa da quei @media s.

Non potrei essere più d'accordo con Vector's answerYou should specify sizes when you want consistency, dovresti evitare i nomi quando vuoi la coerenza.

Infine ecco alcuni link per ulteriori informazioni:

• How we learned to leave default font-size alone and embrace the em.
• Responsive Design with CSS3 Media Queries.

Infine come opzione alternativa è possibile scaricare e incorporare un font nel CSS:

@font-face { 
    font-family: 'LiberationMonoRegular'; 
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'), 
     url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; } 

Poi, nel tuo reimposta basta usare il tuo carattere:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; } 

Speranza che aiuta!

Answer 3

Che ne dici di impostare un'altezza di linea?

Ho avuto lo stesso problema con diversi browser in cui i caratteri avevano posizioni diverse. Potrei risolvere questo problema impostando uno height e line-height.