Mobil-Browser machen betr. Textgröße usw. anscheinend, was sie wollen – Gegenmittel?

  • Ich habe hier mehrere Joomla-Websites (neuester Stand), in denen Artikel zuweilen in Lightboxen als Iframes dargestellt werden. In einem Fall ist es der Inhalt einer Extension – der Buchungskalender von Joomdonation.

    Auf meinen Desktops sind die Darstellungen der Iframes und deren Inhalt ziemlich gleich – getestet mit Firefox, Brave / Chrome und Opera. Auf meinem Android-Smartphone verhalten sich die Mobilversionen der drei genannten Browser derart unterschiedlich, dass die Benutzbarkeit teils kaum noch gegeben ist!

    Brave / Chrome liefert noch eine dem Desktop weitgehend ähnliche Darstellung. Firefox ist schon krass und zeigtt die Schriftgröße mindestens um 2px zu groß, sodass der Text endlos lang erscheint und das Lesen erschwert ist. Opera-Mobil: Selbst die ganz normal gestalteten Webseiten werden in zu kleiner Schrift dargestellt und der Inhalt der Iframes ist noch kleiner.

    Schlimm finde ich bei allen Mobilbrowsern, dass die in der Desktop-Darstellung genutzte DropDown-Auswahl-Liste immer als Liste mit Option-Buttons angezeigt wird und die Schrift zu diesen Options einfach riesig ist. Leider kann ich davon keinen Screenshot machen, da die Optionbox sofort zuklappt, wenn ich den Screenshot starte.

    Ich habe mal vom Buchungskalender je Mobil-Browser drei Screenshots erstellt und hier angehängt.

    Was kann ich tun, um die Mobilbrowser zu einer zumindest einheitlicheren Darstellung zu zwingen, die der Desktop-Darstellung ähnelt?

  • Der Ärger mit unterschiedlicher Darstellung geht leider weiter. Und wieder sind auf dem Desktop der Firefox und Brave / Chrome identisch, unterscheiden sich aber drastisch in der Mobil-Darstellung.

    Ich habe ein Signet im Kopf der Website, dessen Größe sich flexibel an die Screenwidth anpassen soll. Das Signet liegt als SVG-Datei vor. Mit CSS sieht das so aus:

    Code
    .uk-logo img {
        width: 50vw;
        min-width: 300px;
        max-width: 600px;
        padding-bottom: 2px;
        margin-left: 5px;}

    Der mobile Brave- / Chrome-Browser macht, was das CSS definiert und das Signet wird nicht schmaler als min-width mit 300px. Im mobilen Firefox dagegen wird das Signet weit über den rechten Bildschirmrand hinaus dargestellt. ES wird auch nicht anders, wenn ich hinter der min-width-Definition ein !important setze.

    Oder genauer ausgedrückt: Damit das Signet die gleiche Darstellungsbreite in beiden Mobilbrowsern bekommt, müsste ich für den Firefox min-width mit 300px definieren und für den Brave / Chrome 400px.

    Müsste ich eine "Browserweiche" per CSS definieren? Ich glaube nicht, dass es so etwas gibt (außer für den alten Internet-Explorer).

  • Neuigkeiten gibt es betreffend der unterschiedlichen Darstellung der Fonts / font size und font weight:

    Firefox Mobil scheint sehr empfindlich zu reagieren, wenn das CSS zum Integrieren der Fonts auch nur einen geringfügigen Fehler beinhaltet.

    Nach Diskussion mit dem YooTheme-Support und eigener Webrecherche stand im Ergebnis, dass der Firefox-Mobil-Browser sowie Safari mobil bis heute eine integrierte Aversion gegen variable Fonts haben und weder per CSS vorgegebene Größen noch Gewichte einhalten. Nicht einmal die im Internet auffindbaren Tipps, die angeblich bei beiden Mobilbrowsern zu Verbesserungen führen sollten, haben in der Realität etwas bewirkt!

    Das ist natürlich fatal bei Überschriften (zu groß und dann Umbrüche) und bei Overlays (zu großer Text führt zum Abschneiden überlaufenden Textes) sowie bei Menüs (zu großer Text führt zu aufgeblähtem Menü, das gescrollt werden muss und daher bedienerunfreundlich ist). Beispiel die hier angehängten beiden Bilder mit selbsterklärendem Dateinamen.

    Meine Schwierigkeit mit dem Signet müsste sich aber doch noch lösen lassen. Aktuell nutze ich ein SVG, weil es beim Skalieren scharf bleibt. Es könnte sein, dass die von mir gewünschte Skalierung mit PNG oder JPG besser gelingt.

    Die von mir hier angesprochenen Schwierigkeiten haben sicher noch mehr Webdesigner und Hobby-User wie ich. Daher wundert es mich, dass sich bisher an diesem Thema noch niemand beteiligt hat.

  • Siehe übrigens z.B. auch Crosslink:

    Clemens-XS
    19. Juni 2024 um 14:27
  • Crosslink??? Ich diesen Thread hier mit der unterschiedlichen Darstellung auf verschiedenen Desktop- und Mobilbrowsern begonnen, wobei ich als Beispiel die DropDown-Liste gewählt hatte.

    In dem von dir angeführten Thread ging es um die Frage, wie man die DropDownliste auf Mobilgeräten im Design erzwungen verändern kann. Ist ja wohl ein deutlicher Unterschied der Fragestellung, oder?

    Und jetzt zuletzt nehme ich als Beispiel die Fonts im Menü, um die unterschiedliche Darstellung zu klären. Wo ist da jetzt ein Crosspost?

    Undschließlich gebe ich sogar noch meine Erkenntnisse als Tipp an die Community hier, nämlich dass variable Fonts zumindest in Firefox und Safari Mobil Probleme bereiten, die anscheinend aktuell noch nicht lösbar sind. Auch Crossposting?

  • Es ist kein Crossposting, Auf github nennen wir solche Verweise "related to", ein Zusammenhang besteht ja.

    Deine Seite sieht doch auf dem Smartphone ganz gut aus?

    Du wirst nie alle Geräte und Browser der Welt testen können und es ist doch egal ob die Darstellung unterschiedlich ist. Welcher deiner potenziellen Kunden wird hergehen und schauen, ob deine Seite auch seinem zweit / dritthandy etwas anders aussieht?

    BTW: Auf meinem Handy sieht es auch anders aus als auf deinen beiden screens.

    Ich verwende yootheme nicht, aber es sollte eine Möglichkeit geben, die Größe von Bildern oder Schriften relativ anzugeben. Pixel Zahlen sind nichts für responsive Darstellung.

  • firstlady Bei YooTheme werden die Bilder nach dem Einfügen ins Layout automatisch in drei bis fünf Bildschirmbreiten neu berechnet und, falls noch nicht geschehen, im webm-format platzsparend und in guter Qualität gecached. Die Bilder passen sich ansonsten selbstverständlich responsive an.

    Bei den Schriften ist das anders. Zwar kann ich für h1 bis h3 die font-sizes in zwei Stufen (unterhalb 940 und oberhalb) abhängig vom Screenwidth anpassen, aber dies ist mir einfach zu wenig. Deshalb habe ich je h1...h6 jeweils vier @media-Regeln definiert, um damit sowohl font-size als auch font-weight anzupassen. Diese hohe Variabilität gibt es nur bei variablen Fonts.

    Im Chrome- oder Brave-Mobilbrowser funktioniert das auch auf Mobilgeräten prima, aber nicht bei Firefox und auch nicht bei Safari.

    Ich hatte früher auch schon mal versucht, die Fonts an die Containerbreite anzupassen, in der sie genutzt werden. Das ging noch gründlicher schief, als jetzt die Nutzung des variablen Fonts, einfach weil gerade wieder bei Mobilbrowsern vw-Einheiten oder calc-Prozeduren nicht zuverlässig funktionieren. Genau dies ist wieder jetzt bei meinem Signet zu beobachten, das ich zurzeit mit der Kombination von vw und min- / max-width versuchte, kontinuierlich an die Screenwidth anzupassen, also ohne media-query-Abstufungen.

    Im Ergebnis sehe ich es auch wie du: Wenn alle Bemühungen keine Verbesserung bei Mobilbrowsern wie Firefox oder Safari bringen, dann muss das einfach hingenommen werden. Man kann es nicht allen Recht machen.
    Ich hätte bisher nur nicht gedacht, dass sich hier die Geschichte wiederholt, die wir alle früher mit dem unsäglichen Internetexplorer erleben durften. Statt die Browser mit immer mehr Schnickschnack und Features auszustatten, wäre es erheblich konstruktiver, dass endlich solche Darstellungs-Basics wie gerade beschrieben oder Features wie Web-RTC endlich mal zuverlässig integriert würden.

    Mich würde es nicht wundern, wenn es bald wieder Websites mit dem Vermerk im Footer geben würde: Best viewed by Chrome- / Brave-Browser :(