it-swarm.com.de

Auf jedem Mobilgerät die richtige Schriftgröße erhalten

In meiner mobilen App verwende ich zum Beispiel große Schriftarten:

<b style="font-size:100px; font-family:Segoe UI">text</b>

Wenn ich es auf meinem Handy teste, sieht es toll aus, aber auf einem kleineren Telefon ist es immer noch gleich groß und es ist zu groß.

Welche CSS-Einstellungen sollte ich verwenden, um auf jedem Telefon die gleiche Größe zu erhalten?

11
brent

Sie sollten Media Queries für unterschiedliche Gerätebreiten verwenden. 

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

Und so weiter...

9
drip

Medienabfragen funktionieren nicht. Ja, die Schriftgröße kann je nach Bildschirmgröße variieren (dh Pixelgröße und nicht physikalische Größe; daher wäre sie auf zwei Geräten mit der gleichen physischen Größe, aber unterschiedlicher Pixeldichte nicht gleich groß).Ihr Ziel ist es, Text mit der gleichen physischen Größe für alle Geräte zu haben, die unabhängig von der Pixeldichte die gleiche physische Bildschirmgröße haben.

Heutzutage passen Mobiltelefone Ultra-HD-Auflösungen für Bildschirme von Palm-Größe, während ältere Telefone eine viel geringere Pixeldichte aufweisen.

Bis vor kurzem gab es keine Lösung für dieses Problem. Vor kurzem fügte CSS3 Unterstützung für das hinzu, was sie "Viewport Sized Typography" nennen. Hier können Sie die Größe von Dingen relativ zur physischen Bildschirmgröße einstellen. Es wird hier erklärt. 

17
Caner

Es ist wünschenswert, Text mit gleichen/ähnlichen Größen für alle Geräte zu haben, und dies wird standardmäßig nicht angezeigt. Dies liegt nicht an kleineren Geräten, die weniger oder kleinere physikalische Pixel haben, sondern an der Skalierung, die auf diesen Geräten vorkommt, um Seiten nicht zu zerbrechen, die meistens für größere Desktop-Bildschirme ausgelegt sind. 

IPhone 5 verfügt beispielsweise über physische Pixel von 1136 x 640 Pixeln. Mit der Gerätesymbolleiste der Entwickler-Tools von Chrome können Sie jedoch feststellen, dass einige Elemente viel größer zu sein scheinen (beispielsweise 1300 x 900). Das liegt daran, dass die Skalierung beim Herauszoomen standardmäßig von Browsern angewendet wird. In diesem Fall würde die CSS-Pixelgröße viel kleiner als die tatsächliche Pixelgröße werden. Stellen Sie sich vor, Sie sehen eine Desktop-Größe-Seite in einem Smartphone, nur viel kleiner. 

Wenn Sie dies nicht wünschen, müssen Sie dem Browser explizit mitteilen, dass er sich nicht mit der Skalierung (in der Kopfzeile Ihrer Seite) beschäftigen soll: 

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

Wenn Sie sehen, dass Text auf Geräten gleich groß ist, haben Sie möglicherweise so etwas und müssen ihn einfach entfernen, um ihn auf Smartphones kleiner zu sehen. 

13
mehmet

Verwenden Sie @media-Abfragen und stellen Sie verschiedene Schriftarten für unterschiedliche Auflösungen ein

Beispiel

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Gut gelesen auf Medienabfragen

1
Mr. Alien

Alternativ können Sie einen Blick auf https://github.com/modularscale/modularscale-sass werfen.

Es kann schnell sehr kompliziert werden, viele Haltepunkte für jedes einzelne mobile Gerät festzulegen, und ich habe mit modularem Maßstab sehr gute Ergebnisse erzielt.

Das Festlegen der Schriftgrößen in EMs oder REMs ist auch der Weg, wenn Sie vollständig zugänglich/flexibel sein möchten.

0
Capsule