Responsive Design in Mobilansicht: 176px

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Luebeck

Neues Mitglied
14 Mai 2019
8
0
1
32
Hallo,

ich habe meine responsive Webseite im Flexbox-Design erstellt. Um das Responsive Design zu prüfen, verwende ich das folgende Tool:

Hier habe ich soweit die Seite überprüft, ob wirklich alle Texte auf ein Display mit 176px passen, d. h. ich will untere Balken zum verschieben vermeiden. Bei einem langen Text sind Probleme aufgetreten. Ich sende hierzu am besten die Screenshots:
516051615162

Der Rote Bereich ist der Textbereich, der gelbe Bereich ist der Body.

Hat jemand ein Tipp, wie ich vermeiden kann, dass der Text nicht über den roten Bereich hinauskommt? Das ist nur bei dieser Bildschirmgröße der Fall..

Vielen Dank
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.488
217
63
176px Breite oder ähnlich geringe Breiten kommen in der Praxis wohl kaum vor. Probleme mit langen Worten treten hingegen immer mal wieder auf.

a) Zunächst sollten bei schmalen Fenstern Leerflächen wie in deinem Fall der body-Bereich vermieden werden.

b) In lange Worte können Leerzeichen eingefügt werden, dadurch werden sie häufig auch besser lesbar. Das mag grammatikalisch nicht immer korrekt sein, hilft aber zusätzlich Menschen, die Leseschwächen haben.

c) Die Schrift sollte eine Mindestgröße haben. Die zu verkleinern sollte also vermieden werden. Webseitenersteller neigen leider dazu die Schriften viel zu klein zu machen.

d1) Die meisten Browser verfügen heute über eine Silbentrennung. Die kann mit der CSS-Angabe

Code:
body {
 hyphens: auto;
}
aktiviert werden. Die funktioniert leider nicht in allen Browsern und zudem nicht so gut wie in Textverarbeitungen.

d2) Deshalb bevorzuge ich in lange Worte an passender Stelle im HTML-Quelltext

Code:
­
(Soft Hypen) einzugeben.

Code:
Donau­dampf­schifffahrts­kapitäns­anwärter­patent
Also ähnlich wie die falschen Leerzeichen. Bei Bedarf bricht der Browser an den Stellen um und fügt einen Bindestrich ein. Das ist also eine Art vorgegebene Silbentrennung und funktioniert in allen Browsern problemlos.

Dabei suche ich im fertigen Text im Editor mittels "Regular expression" alle Worte mit mehr als 14 Buchstaben und füge dort das Soft Hypen an passenden Stellen über den Zwischenspeicher ein. In der Praxis sind das in deutschen Texten grade mal 2 bis 5 Worte, der Aufwand ist also gering, die Wirkung groß, da lange Worte auch im normalen Fließtext bei Umbrüchen unschöne Lücken am rechten Rand reißen.
 
Werbung: