Schriftgrösse

[struggle]

Hallo,

nachdem ich mir ein neues Smartphone zugelegt habe, fiel mir auf, dass das Display etwas schmaler geworden ist.

Bei Aufruf meiner Seite: https://www.meinlangengrassau.de "bricht" das Wort "Langengrassau" bei der Ansicht im Crome um

Bei der Ansicht im Opera auf dem gleichen Handy stimmt es:

"Langengrassau" hat im Code-Editor H1. H2 wäre mir schon wieder zu klein. Kann ich im Editor eine andere Größe eingeben, so das die Ansicht wieder passt?

[Tommy Herrmann]

Moin Reinhard,

an meinem relativ neuen Samsung "Galaxy S24" wird das übrigens in allen Browsern korrekt angezeigt, auch im "Chrome".

Diese "Header" Tags, wie <h1> werden von Mobirise ziemlich kompliziert kalkuliert, sodass sich diese eigentlich der Größe von allen Handy-Displays anpassen sollten. Mit so langen Worten haben sie wohl nicht gerechnet. Das <h1> Tag verwendet in Deinem Thema offensichtlich die Mobirise class="display-1":

Code: Alles auswählen

@media (max-width: 768px) {
  .display-1 {
    font-size: 3.4rem;
    font-size: calc( 2.1374999999999997rem + (4.25 - 2.1374999999999997) * ((100vw - 20rem) / (48 - 20)));
    line-height: calc( 1.4 * (2.1374999999999997rem + (4.25 - 2.1374999999999997) * ((100vw - 20rem) / (48 - 20))));
  }

Das ist jetzt für mich so auch etwas schwer auszuprobieren. Teste es doch einfach selbst zunächst mal mit der Schriftgröße 1.5rem und passe das eventuell noch nach Deinen Wünschen an, also etwas kleiner wie 1.2rem oder auch größer wie 1.7rem, musst Du testen.

Ich habe also diese class="myH1" genannt (Code unten) und die Media-Anweisung außen herum zusätzlich angegeben, sodass diese Class bis zu einer maximalen Displaybreite von 768 Pixeln wirken soll. Handy-Display ist so meist 360px breit.

Code: Alles auswählen

@media (max-width: 768px) {
  .myH1 {
    font-size: 1.5rem;
  }
}

Kopiere also diese CSS-Anweisung in den Bereich "CSS Editor" von Deinem Header-Block und schreibe diese class="myH1" mit an die bereits vorhandene Class vom <h1> Tag im "HTML Editor" hinzu. Siehe Screenshot:

[struggle]

Hallo Tommy,
besten Dank für die Antwort, dann werde ich mal ein wenig im CSS-Editor "rumspielen" !

Hat zwar nichts mit Mobirise zu tun, aber ich verstehe es dennoch nicht.
Mein vorangegangenes Display hatte 6.53 (1080 x 2340)
Jetzt habe ich im Honor 6 Lite, 6,78 Zoll (1200 x 2652)
In beiden Fällen wurde Chrome genutzt. Im kleineren Display wurde alles korrekt angezeigt, im Honor gibt es den Umbruch.

[Tommy Herrmann]

Moin,


habe mal die KI "ChatGPT" mit dieser Frage bemüht:


Tommy hat gefragt:

Kannst Du mir eine Erklärung geben warum bei dem Smartphone eines Freundes das Display ganz unterschiedlich ein langes Wort im Header darstellt. Im vorangegangenen Smartphone-Display wurde das Wort korrekt angezeigt, im neuen dagegen wird es umbrochen, obwohl das Display größer zu sein scheint.

Sein vorangegangenes Display hatte 6.53 Zoll (1080px x 2340px). Jetzt hat das Display 6,78 Zoll (1200px x 2652px)

Die Darstellung eines langen Wortes im Header unterscheidet sich zwischen den beiden Smartphones deines Freundes, obwohl das neue Display sogar größer und höher aufgelöst ist. Das liegt daran, dass die tatsächliche Darstellung auf dem Display nicht nur von der physischen Bildschirmgröße und Auflösung abhängt, sondern auch von mehreren anderen Faktoren wie der Pixeldichte, dem Seitenverhältnis und vor allem dem Betriebssystem oder der App-Layout-Einstellung. Hier sind die Hauptgründe, warum es zu dieser Veränderung kommen kann:

1) Pixeldichte (PPI): Obwohl das neue Display größer und höher aufgelöst ist, hat es möglicherweise auch eine höhere Pixeldichte. Die Pixeldichte beeinflusst, wie groß Elemente auf dem Bildschirm erscheinen. Ein Bildschirm mit einer höheren Pixeldichte zeigt Inhalte zwar schärfer, aber auch kleiner an. Um dies auszugleichen, skalieren Betriebssysteme und Apps oft den Text automatisch, was zu Umbrüchen führen kann.

2) Skalierungsfaktoren des Betriebssystems: Android und iOS passen die Darstellung oft an die Displaygröße und Pixeldichte an, was durch automatische Skalierung geschieht. Wenn das neue Display eine höhere Auflösung und Pixeldichte hat, könnte das Betriebssystem die Skalierung erhöht haben, was in kleineren, dichteren Textdarstellungen resultieren kann – und damit auch zu einem anderen Zeilenumbruch.

3) Seitenverhältnis und verfügbare Header-Breite: Der Unterschied im Seitenverhältnis zwischen dem alten und dem neuen Display kann ebenfalls zu einer veränderten Textdarstellung führen. Das alte Display hatte ein Seitenverhältnis von etwa 19,5:9, das neue Display von etwa 20:9. Ein breiteres Seitenverhältnis bietet mehr Platz horizontal, was tendenziell ein längeres Wort ohne Umbruch begünstigt.

4) App-Layout und Schriftgrößeinstellungen: Manche Apps passen ihre Darstellung an spezifische Geräte an, was bedeutet, dass die Layouts für jedes Display unterschiedlich aussehen können. Überdies können auch die Systemeinstellungen zur Schriftgröße oder Bildschirmvergrößerung einen Einfluss haben. Wenn auf dem neuen Gerät eine größere Schrift oder eine höhere Skalierung eingestellt ist, könnte dies ebenfalls zu einem Umbruch führen, selbst wenn das Display eigentlich größer ist.

5) Responsive Design-Einstellungen der App: Moderne Apps verwenden oft „Responsive Design“-Ansätze, bei denen die Darstellung dynamisch an die Bildschirmgröße und Auflösung angepasst wird. In diesem Fall könnte die App für das neue Display andere Werte verwenden, um die Lesbarkeit zu maximieren. Dies kann auch Änderungen bei der Wortanzeige und beim Umbruch bewirken.

Lösungsmöglichkeiten:

Falls dein Freund das Wort wieder vollständig angezeigt haben möchte, kann er Folgendes ausprobieren:

> Schriftgröße und Bildschirmvergrößerung in den Systemeinstellungen reduzieren.

> In den App-Einstellungen prüfen, ob es eine Option für „Anpassung an Bildschirmgröße“ oder Ähnliches gibt.

> In den Entwickleroptionen (falls verfügbar) des Geräts die Skalierungsfaktoren anpassen (z. B. „DPI“ oder „Display Scaling“).

Diese Anpassungen könnten den gewünschten Effekt haben, damit das lange Wort wieder vollständig in einer Zeile angezeigt wird.

[Rancher]

Wahnsinn, diese umfangreiche Antwort.

[Tommy Herrmann]

Moin,

ja - es ist der helle Wahnsinn

Wenn man sich etwas mit der KI beschäftigt, scheint da fast alles möglich zu sein

ChatGPT hat mir inzwischen auch jede Menge JavaScript und PHP beigebracht. So war ich im Handumdrehen in der Lage zum Beispiel diesen Captcha-Code für ein Formular zu erstellen:

https://www.mobirise-tutorials.com/Kont ... orial.html

[struggle]

IRRE !

Dankeschön