font- und graphikscalierung in sehr kleinen viewports

[michaah]

Das ist eine Spielerei, Ergebnis meiner Experimente zu responsive design mit mobil first Ansatz. Dabei hat mich beschäftigt, wie weit unterhalb einer Screenbreite von 320px meine Seite noch ein brauchbares Layout hat, wie sinnvoll das ist soll hier nicht Teil der Betrachtung sein, zudem weiß ich gar nicht was wirklich die Untergrenze für Kleingeräte mit Internetanschluß ist.

Mich hat einfach interessiert welche wenigen media query Einzeiler notwendig auch bei sehr engen Viewports noch eine brauchbare Darstellung zu erreichen.

Dabei ist mir dann aufgefallen, dass irgendwann die Graphiken in den dev-tools zunehmend kleiner als 98% der Breite dargestellt wurden (Einen browser kann man möglicherweise gar nicht so weit zusammenschieben). Dies fiel (ungefähr oder genau?) zusammen mit dem Unterschreiten eines bestimmten Breitenwertes, ab dem auch alle Schriften immer kleiner scaliert wurden. Auffällig ist dabei, dass die Graphiken viel schneller kleiner werden als Schriften. Ich hätte die Kleinerscalierung der Bilder gerne unterbunden, weil sie vollkommen unvorteilhaft war: Bilder die vorher mit 98% des Viewport angezeigt wurden, waren dann immer schmaler und füllten am Ende sinnloserweise weniger 50% der vorhandenne Breite aus (in den dev-tools!)

Ich wollte herausfinden welches Element oder welcher CSS Wert dise dahingehend beeinflußte, konnte aber trotz intensiver Suche nichts finden.

Experimente haben dann zu Tage gefördert, dass wohl der entscheidende Faktor der Moment ist , dass Texte nicht mehr umgebrochen werden können oder der Browser das nicht mehr will, z.b. bei zwei kurzen Worten.

Das Herunterskalieren von Schriften ist dann ja vielleicht sinnvoll, oder zumindest nachvollziehbar. Das Herunterskaliern von Graphiken unter die volle Breite ergibt überhaupt keinen Sinn.

Da dies ggf. aber auch bei nicht ganz kleinen Viewports passieren kann (siehe Beispiel, Negativskalierung greift ab ca 400px) würde ich diese Phänomen gerne besser verstehen und wissen, ob man das irgendwie beeinflussen kann (ja, ich könnte das superlange Wort weglassen).

• Ja, die Basisschriftart spielt eine Rolle,
• ja, ohne Text tritt das problem gar nicht auf.

Ist das überhaupt nur eine fehlerhafte/eigenwillige Darstellung in den dev-tools (chromium, nicht Vivaldi)?

[michaah]

Ok, das ist offenbar schlichtweg ein Chromium-dev-tool Bug. In den FF dev-tools tritt dieses Phänomen nicht auf.