Stefan B.: Kleinere Schriftgröße im DIV auf Chrome Android

problematische Seite

Moin, mir ist aufgefallen, dass unter Chrome Android der Text innerhalb eines DIV kleiner dargestellt wird als außerhalb des DIV, allerdings nur, wenn diesem DIV der Style "display: inline-block;" zugewiesen wurde. Woran könnte das liegen?

Testseite

Screenshot von Chrome Android:

Beispiel-Code:

<p>Bla</p>

<div style="border:1px solid #808080; display: inline-block;">
	<p>Bla</p>
</div>

Im Windows-Chrome passiert das nicht. Habe dann mehrere Android-Browser getestet mit folgendem Ergebnis:

  • Firefox und Opera verkleinern die Schrift nicht.
  • Chrome und Vivaldi verkleinern die Schrift.

Im Header der Testseite ist auch noch die Angabe für Mobilbrowser enthalten:

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

Gruß Stefan

  1. problematische Seite

    Hallo Stefan,

    in meinem Android-Chrome passiert das auch nicht.

    Du solltest dein Handy per USB mit deinem Desktop-Chrome verbinden und per Remote Debugging untersuchen, wo der Style-Unterschied herkommt. Ruf dafür, wenn die Verbindung da ist, chrome://inspect/#devices auf. Es kann einen Moment dauern, bis dein Handy angeboten wird.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Ah, danke, werde ich ausprobieren. (Ich hatte mich heute schon gefragt, wie man eigentlich eine Seite im Mobil-Browser debuggt...) Werde allerdings diese Woche nicht mehr dazu kommen, aber ich werde berichten...

      VG Stefan

  2. problematische Seite

    Nach ein wenig Herumexperimentieren habe ich herausgefunden, dass dieser Größenunterschied bei der Schrift dann auftritt, wenn in den Android-Einstellungen unter "Bedienungshilfen" die Schriftgröße verändert wird. Ich hatte dort eine Stufe größer eingestellt. Nach Zurückstellen auf die Standardeinstellung werden beide Textblöcke mit gleichgroßer Schrift dargestellt. Allerdings ist mir die doch sehr winzige Systemschrift auf Dauer zu anstrengend, weshalb ich das wieder zurückgestellt habe. Ich halte das für einen Browser-Bug, zumal das auch nur bei Schrift innerhalb von DIVs mit style="display: inline-block;" auftritt und - wie ich gestern auch noch festgestellt habe - innerhalb von Tabellen, und weil es ja auch Browser gibt, die hier keinen Unterschied machen, sondern alle Texte gleich vergrößern. Werde das mal über die Feedback-Funktion von Chrome Android melden.