it-swarm.com.de

Inkonsistente Schriftgrößen auf dem Smartphone

Ich stelle eine Webseite so ein, dass sie auf Smartphones gut aussieht. Ich habe einen @media-Abschnitt in der CSS-Datei deklariert, damit ich die Schriftgrößen für diese Seite angeben kann. Hier ist dieser Medienbereich:

@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 gesagt, dass die Schriftarten "klein" sind, aber ein Abschnitt zeigt die Schriftarten in einer viel kleineren Größe (id = "trademark_footer" unten). Die Verwendung von "xx-large" macht die Schrift nicht einmal so groß wie die "kleine" Schrift auf dem 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 Schrift in der Marke am unteren Rand der Seite so viel kleiner dargestellt als die Schrift auf dem Rest der Seite (Chrome unter Android)?

Zweitens, warum werden alle Schriftarten im iPhone-Simulator so klein angezeigt?

Ich versuche nur, alle Schriftarten auf allen Smartphones in lesbarer Größe anzuzeigen.

UPDATE:

Wenn ich die Schriftgrößen explizit vorgebe, habe ich dasselbe Problem. Wenn ich beispielsweise 13px für den primären Zeichensatz angeben, muss ich etwas rund um 30px auf der Marke angeben, damit er in einer ähnlichen Größe angezeigt wird.

Dasselbe, wenn ich "em" verwende.

UPDATE:

Ich habe es gerade im Standardbrowser (glaube ich) auf meinem Samsung Galaxy S2 getestet. Dieser zeigt auch die winzige Schrift - so klein, dass sie nicht lesbar ist. Im Standard-Adroid-Browser kann ich übrigens doppelt tippen und es wird auf eine Nice-Größe erweitert.

Habe es versucht und es schien keinen Unterschied zu machen:

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

Ich habe mir den Quellcode dieser Seite angesehen und konnte das nicht sehen 

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

Wenn ich mein iPhone anschaute, 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 Medienabfragen wirksam wird.

Das Hinzufügen des Viewport-Meta-Tags sollte die Medienabfragen und die Schriftartenänderungen auslösen, nach denen Sie suchen.

Info zum Viewport-Tag

52
Duncan Beattie

Dies ist ein langer Weg, aber es kann Ihnen etwas helfen.

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

Werfen Sie einen Blick auf diese page s @medias (Sie können auch die Vorlage der HTML5 Boilerplate sehen Sie könnten möglicherweise auch etwas von Ihrem Problem herausfinden). Ich habe kein Problem mit der Schriftgröße und habe den vorherigen 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). Vielleicht könnten Sie etwas aus diesen @medias herausgreifen.

Ich kann der Antwort von Vector nicht mehr zustimmenYou should specify sizes when you want consistency. Sie sollten Namen vermeiden, wenn Sie Konsistenz wünschen.

Zum Schluss noch ein paar Links für weitere Infos:

Als Alternative können Sie eine font in Ihre css herunterladen und einbetten:

@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 verwenden Sie in Ihren Resets einfach Ihre Schriftart:

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

Ich hoffe es hilft!

1
Esteban

Wie wär's mit einer Zeilenhöhe?

Ich hatte das gleiche Problem durch verschiedene Webbrowser, bei denen die Schriftarten unterschiedliche Positionen hatten. Ich könnte dieses Problem lösen, indem ich height und line-height setzt.

0
bonny