In meiner mobilen App verwende ich eine Art von großen Schriften zum Beispiel:
<b style="font-size:100px; font-family:Segoe UI">text</b>
Wenn ich es auf meinem Handy ausprobiere sieht es gut aus, aber auf einem kleineren Handy ist es immer noch gleich groß und es ist zu groß.
Welche css-Einstellungen sollte ich verwenden, um auf jedem Telefon dieselbe Größe zu erhalten?
Medienabfragen funktionieren nicht. Ja, Sie können unterschiedliche Schriftgrößen basierend auf der Bildschirmgröße haben (das ist die Pixelgröße und nicht die physikalische Größe, daher wäre es nicht die gleiche Größe auf zwei Geräten mit gleicher Bildschirmgröße, aber mit unterschiedlicher Pixeldichte). Ihr Ziel ist es, Text mit derselben physischen Größe auf allen Geräten zu verwenden, die unabhängig von der Pixeldichte dieselbe physische Bildschirmgröße haben.
Heutzutage passen Mobiltelefone Ultra HD-Auflösungen in handgroße Bildschirme, während ältere Telefone eine viel geringere Pixeldichte haben.
Bis vor kurzem gab es keine Lösung für dieses Problem. Vor kurzem hat CSS3 Unterstützung für das, was sie "Viewport Sized Typography" nennen, hinzugefügt. Sie können damit die Größe der Objekte relativ zur physischen Bildschirmgröße festlegen. Es wird erklärt hier .
Text mit gleichen / ähnlichen Größen ist auf allen Geräten wünschenswert, und Sie erhalten das standardmäßig nicht. Es ist nicht wegen der kleineren Geräte haben weniger oder kleinere physische Pixel, sondern aufgrund der Skalierung, die auf diesen Geräten passieren, um Seiten nicht zu brechen, die meist für größere Desktop-Bildschirme ausgelegt sind.
Zum Beispiel hat das iPhone 5 physikalische Pixel von 1136 x 640 Pixeln, aber wenn Sie die Gerätesymbolleiste von chrome verwenden, sehen Sie vielleicht, dass einige Elemente viel größer erscheinen (sagen wir 1300x900). Dies liegt an der Zoom-Out-Skalierung, die Browser standardmäßig anwenden. 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 Seite im Desktop-Format in einem Smartphone, nur viel kleiner.
Wenn Sie das nicht möchten, müssen Sie dem Browser ausdrücklich sagen, dass er sich nicht mit der Skalierung (in Ihrem Seitenkopf) anlegen soll:
%Vor%Wenn Text auf allen Geräten gleich groß ist, haben Sie möglicherweise so etwas und müssen ihn entfernen, um ihn auf Smartphones kleiner zu sehen.
Alternativ können Sie sich auch Ссылка
ansehenEs kann schnell sehr kompliziert werden, viele Breakpoints für jedes einzelne Mobilgerät einzurichten, und ich habe sehr gute Ergebnisse mit modularer Skalierung erzielt.
Auch das Einstellen der Schriftgrößen in EMs oder REMs ist der richtige Weg, wenn Sie vollständig zugänglich / flexibel sein wollen.