Inkonsistente Schriftgrößen auf Smartphone

Question

Ich bin eine Website optimieren, so dass es auf Smartphones gut aussieht. Ich habe einen @ media-Abschnitt in der CSS-Datei deklariert, damit ich die Schriftgrößen für diese Seite festlegen kann. Hier ist der Medienabschnitt:

@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; 
    } 
} 

Die Schriftgrößen werden jedoch inkonsistent angezeigt. Ich habe es gesagt, um die Schriftarten "klein" zu zeigen, aber ein Abschnitt zeigt weiterhin die Schriftarten in einer viel kleineren Größe (id = "trademark_footer" am unteren Rand). Die Verwendung von "xx-large" macht die Schriftart nicht so groß wie die "kleine" Schriftart im Rest der Seite. Ich sehe die Seite in Chrome auf Android.

Wenn ich diese Seite im folgenden Simulator anzeigen, sind alle Schriftarten auf der gesamten Seite winzig - viel zu klein zum Lesen.

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

Erstens, warum wird die Schriftart in der Marke am unteren Rand der Seite zeigt sich so viel kleiner als die Schriften auf dem Rest der Seite (Chrome auf Android)?

Zweitens, wieso sind alle Schriftarten im iPhone Simulator so klein?

Alles, was ich versuche, ist es, alle Fonts in lesbarer Größe auf allen Smartphones anzuzeigen.

UPDATE:

Wenn ich die Schriftgrößen explizit angeben, ich habe das gleiche Problem. Wenn ich zum Beispiel 13px für die primäre Schriftart festlege, muss ich etwas um 30px auf der Marke angeben, damit es in einer ähnlichen Größe erscheint.

Das Gleiche, wenn ich "em" s verwende.

UPDATE:

ich es nur in der Standard getestet (glaube ich) Browser auf meinem Samsung Galaxy S2 und das zeigt die winzige Schrift, allzu so klein, es unleserlich ist. Im Standard-Adroid-Browser kann ich übrigens doppelt tippen und es wird auf eine schöne Größe erweitert.

versuchte dies und es scheint keinen Unterschied zu machen:

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

Answer 1

ich einen Blick auf die Quelle dieser Seite hatte und ich konnte die

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

nicht sehen

Als ich auf mein iPhone schaute, schien es die Seite überhaupt nicht zu skalieren, was darauf hindeutet, dass das Gerät die Größe der Seite interpretiert und somit keine der Medienanfragen wirksam wird.

Das Hinzufügen des Viewport-Metatags sollte die Medienabfragen und die von Ihnen gewünschten Schriftartenänderungen auslösen.

info on the viewport tag

Answer 2

Dies ist eine lange gedreht, aber es kann Ihnen ein wenig helfen.

Ich habe http://inrix.com/traffic/Privacy mit einem iPhone4 (iOS 5.0.1) geöffnet und in der Tat ist die Schriftart wirklich klein.

Werfen Sie einen Blick auf diese page ‚s @media s (Sie auch die HTML5 Boilerplate's template Sie vielleicht in der Lage sehen konnte etwas von dort zu in Bezug auf Ihre Frage zu graben). Ich habe kein Schriftgröße Problem und ich habe der vorherige Link auf Chrome (Version 26.0.1410.64 m), iOS 5.0.1 (9A405) und Android 2.3.6 mit beiden Ausrichtungen (in den Telefonen) getestet . Vielleicht könntest du etwas aus diesen @media s graben.

Ich könnte mehr mit Vector's answerYou should specify sizes when you want consistency nicht zustimmen, sollten Sie Namen vermeiden, wenn Sie Konsistenz wollen.

Schließlich sind hier einige Links für weitere Informationen:

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

schließlich als alternative Option, die Sie eine font in Ihrem css herunterladen konnte und betten:

@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; } 

Dann einfach in Ihre Resets verwenden Ihre Schrift:

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

Hoffe, es hilft!

Answer 3

Wie wäre es mit einer Zeilenhöhe?

Ich hatte dasselbe Problem durch verschiedene Webbrowser, wo die Schriftarten unterschiedliche Positionen hatten. Ich könnte das lösen, indem ich height und line-height einstelle.