Text ragt bei Mobilversion aus dem Bild / wieviele Varianten anlegen?

Nina-D schrieb am 28.04.2021 um 08:42 Uhr

Hallo zusammen,

nachdem ich die mobile Version meiner Webseite fast fertig gestellt habe (diese hat die 480px Standard-Breite), ist mir folgendes beim Probe-Upload aufgefallen:

Wenn der Smartphone-Besucher in seinem Handy eine größere Schrift in seinen allgemeinen Smartphone-Einstellungen eingestellt hat, so ragt mein Text nach rechts aus der Seite heraus und ist folglich, je nach Schriftgrößen-Einstellung, nicht lesbar😫.


Meine Seite wird also nur optimal dargestellt, wenn der Besucher die Standard-Schriftgröße in seinen Smartphone-Einstellungen gewählt hat.

Nun weiß ich ja, dass die mobile Website nicht wirklich responsive ist....
Deswegen haben sich bei mir zwei Fragen ergeben:

1.) Wie kann ich dieses "Rausragen" der Schrift aus dem rechten Rand vermeiden?
Kann man das mit noch mehr Varianten der Seite umgehen? Und wenn ja, wie viele Varianten legt ihr denn so an, und wie groß sind diese Varianten in Pixel?

2.) Die 480px- Variante ist ja für die Darstellung auf dem Smartphone im Hochformat gedacht. Wenn man die Website im Querformat anschauen will, ist das auch nicht mehr schön, weil sie ja viel zu schmal dargestellt wird.
Ist es hierfür auch üblich für die Querformat-Besucher noch eine weitere Variante anzulegen? Und falls ja, gibt es hierfür eine Standard-Breite?

Vielen Dank für Tipps 🌻

Kommentare

marboe schrieb am 28.04.2021 um 09:06 Uhr

Du könntest dir Option "auf Seitenrand beschneiden" wählen (gleichzeitig auch auf die Zoomanzeige verzichten).

Und ja, weitere Varianten lösen das Problem. Auch hat nicht jedes Smartphone die gleiche Auflösung. Ich habe meist drei Varianten. 360 - 780 - 1200. Damit fahre ich ganz gut.

Gruß Marboe

Nina-D schrieb am 28.04.2021 um 10:00 Uhr

Hi marboe,

danke für die schnelle Antwort😀.

Die Funktion "Seitenrand beschneiden" ist bei mir von Haus aus eingestellt gewesen.
Wo finde ich das mit der Zoomanzeige?

Okay, dann werde ich mich wohl mit dem Erstellen von einigen Varianten anfreunden müssen 😉
Warum hast du keine 480px Variante gewählt, gibt es da einen Grund?

marboe schrieb am 28.04.2021 um 11:27 Uhr

Wo finde ich das mit der Zoomanzeige?

Das findest du im neuesten WD dort:

Warum hast du keine 480px Variante gewählt, gibt es da einen Grund?

Ja, die zwei größten Webseiten werden auch von älteren Geräten aufgerufen. Dort ist die Auflösung nicht so dolle, was sich im Hochkantmodus dann schon bemerkbar macht.
Aber gegen 480 spricht auch nicht viel. Wenn dir das langt, ist es ok. Du musst halt immer berücksichtigen, dass du die Website nicht für dich machst, sondern für deine User. Und wenn du nicht weißt mit welchen Devices sie unterwegs sind, wird es schwierig.
Auf jeden Fall macht eine dritte Variante Sinn, und zwar für Tablets und gleichzeitig für den Landscape-Modus von Smartphones.

Meine Seite wird also nur optimal dargestellt, wenn der Besucher die Standard-Schriftgröße in seinen Smartphone-Einstellungen gewählt hat.

By the way - an wievielen Smartphones hast du das denn getestet? Mir kommt das sehr merkwürdig vor. Die Breite des laufenden Textes wird durch die Begrenzung der Textbreite bestimmt und nicht durch die Größe der Buchstaben. Vielleicht läuft dein Textfeld in der Anlage des WD ja auch über die Begrenzung hinaus?

Gruß Marboe

Nina-D schrieb am 28.04.2021 um 13:12 Uhr

Hi marboe,

achso, du meintest diese Exporteinstellungen.
Beim WD 17 habe ich sie gefunden unter: "Extras"-> "Webexportoptionen".😉

Dort ist bei mir auch alles deaktiviert. Dann scheint das Problem woanders zu liegen..?
Der Text ist bei mir auch alles optimal im Rahmen, sogar noch mit Rand.

UPDATE:
Ich bin auf meiner Fehlersuche schon weiter gekommen:
Und zwar tritt das Problem nur beim mobilen Firefox-Browser auf (und bei anderen die auf dem Firefox basieren, wie zB den "Duck Duck"-Browser.)

Andere Browser wie Chrome, Opera, Samsung Internetbrowser, Brave- Browser zeigen das Problem nicht.

Nur beim Firefox verschwindet meine Schrift, wenn der Nutzer die Schriftart um einen Grad in seinen Einstellungen erhöht hat. Wirklich ärgerlich, weil der Firefox-Browser doch recht häufig genutzt wird.

Ich habe das Ganze getestet auf zwei verschiedenen Samsung Galaxy Notes und auf einem kleinen alten Samsung Galaxy S4. Sobald die Schriftgröße einwenig erhöht wurde, macht der Firefox nicht mehr mit 😧

Ein Beispiel, wie das aussieht. (Es betrifft auch den gesamten Text der Seite.)

Hier in dem Beispiel sollte das letzte Wort "Buchung" in der fixierten Leiste unten lauten.

 

Womöglich könnte eine zusätzliche Variante mit 360 px wie bei dir für dieses Problem Abhilfe schaffen?

Und lieben Dank mit dem Tipp für die Tablet-Variante (=Landscape-Modus).🌻

Werde ich so umsetzen ☺️👍

 

 

Nina-D schrieb am 28.04.2021 um 13:31 Uhr

Dazu möchte ich noch ergänzen, dass andere Websites im Firefox natürlich responsive angezeigt werden. Nur meine Seite und vielleicht auch bei anderen WD-Nutzern evtl auch nicht...?!

marboe schrieb am 29.04.2021 um 11:58 Uhr

Ich habe das jetzt nochmal getestet, da ich mich an frühere Probleme - auch beim FF - erinnere. Aktuell besteht das Anzeigeproblem nicht mehr; auch wenn ich die Schrift vergrößere auf 110 oder 120%.
Mein Build ist: Firefox 88.1.2. (Build #2015806939)

Getester mit einer Seite mit folgenden Varianten:
 

@media screen and (min-width: 1120px) {#xr_xr {top:0px;}}
  @media screen and (min-width: 480px) and (max-width: 1119px) {#xr_xr {top:0px;}}
  @media screen and (max-width: 479px) {#xr_xr {top:0px;}}

Gibt es vielleicht ein Update bei deiner App?

Natürlich ist in der Variante der Text ein wenig vom Rand weg.

Gruß Marboe

Nina-D schrieb am 30.04.2021 um 14:53 Uhr

Hi marboe,

ich habe nach Neuinstallation auch die aktuelle Firefox-Version wie du (88.1.2.), trotz allem tritt das Problem auf.

Meine Seitenränder in meiner Datei sehen so aus:


Ist das zu wenig Abstand von rechts? Das wäre schade, wenn ich auch die Schriften im Header & Co verändern müsste. Zudem kommt ja noch hinzu, dass wenn die Schriftgröße noch höher eingestellt ist, NOCH MEHR Verschiebung auftritt. Je größer die Schrifteinstellung, desto mehr ragt der Text heraus. Ebenso passen Texte in Platzhaltern auch nicht mehr rein und werden zum Teil verdeckt angezeigt.

So sieht meine Schriftgrößeneinstellung im Android, Samsung Galaxy Note aus:
Hier gibt es keine Prozentangaben mehr. Ich gehe davon aus, dass der markierte Punkt nun 110% sind, ab da beginnt das Fiasko 😳....Standardeinstellung ist der Punkt links daneben.

Und NUR im Firefox habe ich dann so einen "Look" nach dem Probe-Upload:

Inzwischen habe ich es auch auf einem Tablet (Samsung Galaxy Tab) getestet- Hier zeigt sich das gleiche Problem, auch in der Tablet-Variante. Alle anderen Browser stellen meine Seite so dar, wie ich sie designt habe.

Hach, vielleicht muss ich damit leben?
Vielleicht gibt es noch eine Idee, was da falsch läuft?

Ich werde auf jeden Fall weiter forschen 😌
 

marboe schrieb am 30.04.2021 um 19:28 Uhr

Welche Schriftart nutzt du denn?

Gruß Marboe

Nina-D schrieb am 30.04.2021 um 20:36 Uhr

Ich nutze die Schriftart "Montserat".

Meinst du, hier könnte der Haken sein?

marboe schrieb am 30.04.2021 um 23:00 Uhr

Möglich. Gib uns bitte mal die URL. Gruß Marboe

Nina-D schrieb am 03.05.2021 um 20:22 Uhr

Hi Marboe,

leider ist meine Webseite noch nicht online. Ich lade sie zurzeit nur passwortgeschützt auf einem anderen Server hoch.

Ich habe aber mal eine Projektdatei erstellt, mit der ich das Ganze nochmal getestet habe.

Hier kann man sie downloaden:


https://www.file-upload.net/download-14572209/SchriftgreimFirefox.zip.html
 

Bei mir sieht das Ergebnis, auch bei dieser Projektdatei wie folgt aus:

 

Ist die Schriftgröße in den Mobilgerät-Einstellungen auf Standardgröße eingestellt, sieht alles super aus:


Wird die Schrifgröße größer eingestellt, um eine Stufe oder z.B 110%, so sieht es im mobilen Firefox so aus:

Wenn die Schriftgröße NOCH größer eingestellt wird, so gibt es NOCH mehr Verschiebung nach Außen:

 

Das Problem taucht wie gesagt nur beim Firefox-Browser mobil auf (ob Tablet oder Smartphone...)

Trotz größter Schrifteinstellung im mobilen Gerät, zeigen mir ALLE anderen Browser ein optimales Ergebnis an, z.B der Opera:

 

Wäre spannend, ob das Problem nur bei meinen mobilen Geräten beim Firefox-Browser (!) auftritt?

Ich habe übrigens auch andere Schriftarten, wie z.B Verdana getestet. Das Problem bleibt jedoch leider trotzdem bestehen...

Ich bin für jedes Feedback dankbar!

 

marboe schrieb am 04.05.2021 um 07:03 Uhr

@Nina-D

Wenn du auf einem Androidsystem unterwegs bist, dann versuche

- Einstellungen im FF
- Barrierefreiheit
- Autom. Schriftgrößenanpassung aktivieren (Schriftgröße entspricht Ihren Android-Einstellungen, deaktivieren führt zur Verwaltung im FF, was aber nicht sein soll in diesem Fall)
- Zoom auf allen Websites ausschalten

Damit bekomme ich im FF sogar Texte richtig umgebrochen angezeigt mit Vergrößerungen von 160%; andere habe ich nicht alle probiert. Das entspricht m.W. auch den Grundeinstellungen im FF. Diese Einstellung funktioniert bei allen von mir erstellten Xara-Websites; jeweils erstellt mit der letzten aktuellen Version bzw ihres Vorgängers.
Viel Erfolg! Grüße Marboe

Nina-D schrieb am 04.05.2021 um 09:11 Uhr

Hi Marboe,

wow, danke für den Hinweis. Du hast Recht, man kann über die FF-Einstellungen endlich Einfluss auf dieses Chaos nehmen. Es hat funktioniert! 😃👍

Ich habe die Schriftgrößenanpassung aktiviert und nun hält sich die Schrift endlich im Rahmen😊👍


Nun hoffe ich natürlich, dass meine Besucher auch auf diese Idee kommen werden. Leider wird ja der FF von Haus aus nicht MIT der Schriftgrößenanpassung installiert.
Und bei anderen Websites, die ja wirklich responsive sind, tritt der Fehler nicht auf. So könnte es für den Besucher so aussehen, als sei meine Seite nicht "optimiert".

Aber gut, ich bin schon sehr froh darüber, dass es Abhilfe für das Problem gibt😁. Evtl. kann man in Zukunft auf eine Verbesserung im FF hoffen.

Danke nochmal💚