Verschiedene Schriftgröße auf der Anzahl der Zeichen abhängig (reaktions)

In Device Mode von Google Chrome, die font-size eines Elements (p, h1, h2, ...) ändert sich die Anzahl der Zeichen zu ändern.Verschiedene Schriftgröße auf der Anzahl der Zeichen abhängig (reaktions)

Dies passiert nicht, wenn der Gerätemodus deaktiviert ist, aber auf meinem Mobilgerät.

Das folgende Bild zeigt die richtige Größe:

Wenn ich mehr Zeichen hinzufügen, font-size erhöht. Das ist die falsche Größe:

Ich will nicht font-size mit der Anzahl der Zeichen ändern. Wie kann ich das beheben?

bearbeiten: einschließlich CSS:

body * { font-size: 20px; } 
p { font-size: 1em; } 
h1 { font-size: 2em; }

EDIT2: Was ich habe ist vergessen zu sagen, dass dieses Problem existiert nur, wenn ich mit einem Joomla Template in joomla arbeiten. Es spielt keine Rolle, ob ich CSS benutze oder nicht.

Quelle

2017-01-01 Smoothi

Niemand kann eine definitive Antwort geben, ohne Ihren Code anzusehen oder replizieren zu können. Bitte teilen Sie Ihren Code. – CoderGuy

Ohne zu wissen, wie Ihr Code aussieht, kann ich nur vorschlagen, dass Sie alle Ihre Schriften als 'px' anstatt einer Mischung von Einheiten definieren (entsprechend Ihrem Kommentar). Wenn Sie echte Hilfe benötigen, müssen Sie Code bereitstellen. Versuchen Sie, Ihren Code auf [fiddlesalad] (http://fiddlesalad.com/) oder [jsfiddle] (https://jsfiddle.net/) zu setzen. –

Ich löste das Problem, indem ich die Viewport-Metadaten anpasste.

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

Quelle

2017-01-01 19:20:44 Smoothi

Ich bin mir nicht sicher über Desktop-Viewing, aber dies scheint ein bekanntes Problem in der Android-Version von Google Chrome zu sein. Hier sind einige mögliche Lösungen, die Sie versuchen wünschen können:

Chrome on android resizes font Sie, welche erklärt, wie dies zu verhindern.
Eher die Implementierung der Lösung für diese Frage, würde ich vorschlagen, dass es viel besser ist, Ihre Website für alle Bildschirmgrößen reaktionsschnell zu machen.

Sie können CSS-Medienabfragen verwenden, siehe https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries für wie Sie sie schreiben.
Alternativ können Sie FlowType.JS verwenden, wenn Sie jQuery verwenden möchten. Es erstellt im Grunde reaktionsfähigen Text für Sie durch automatisches Erkennen der Bildschirmgröße und Größe des Textes.

Es optimiert auch offensichtlich die Anzahl der Zeichen in jeder Zeile zum leichteren Lesen. Seine Website ist bei http://simplefocus.com/flowtype/, wenn Sie interessiert sind.

Quelle

2017-01-01 16:35:54 Zak

Das klingt interessant.Ich habe vergessen zu sagen, dass ich Joomla benutze und ich glaube, dass Joomla JQuery verwendet. Vielleicht benutzt Joomla schon Flowtyp mit einigen Konfigurationen? – Smoothi

Unwahrscheinlich, da es ein ziemlich kleines Projekt ist. Wenn du dein eigenes Thema erstellst, kannst du es trotzdem einbauen. Auch, wenn Sie meine Antwort nützlich fanden, würden Sie es bitte akzeptieren? – Zak

Verschiedene Schriftgröße auf der Anzahl der Zeichen abhängig (reaktions)

Antwort

Verwandte Themen