Chrome experimentiert mit einem neuen Flag: Try text scaling support in Chrome Canary: <meta name="text-scale" content="scale">
Darin sagt der Author:
And that’s not great, because research by Appt shows around 37% of Android users and 34% of iOS users have changed their system-level text scale factor from the default. And web developers currently have no way to respect that.
Falls ihr das Problem jetzt schon lösen müsst: Das stimmt nicht ganz, aktuell kann man das auf iOS mit einem Trick lösen.
Auf iOS gibt es die CSS-Aliase mit dem Präfix -apple. Ihr kennt vielleicht -apple-system. Das ist ein Alias für die Systemfont auf Apple-Geräten (also quasi ein Alias für “San Francisco”).
Darüber hinaus gibt es noch mehr, unter anderem -apple-sytem-body. Das ist nicht nur ein Alias für die Font, sondern für alles, was zum Stil eines “Body-Textes” auf Apple-Systemen dazu gehört. Also auch die Font-Size.
Verwendet man (Fallbacks mal ausgelassen):
font: -apple-system-body;Dann skaliert sich der Text auch mit den a11y-Settings des Betreibssystems. Das Problem: Das setzt dann die Font auf San Francisco. Das will man vielleicht nicht.
Dafür gibt es einen Trick: Man benutzt die Definition von -apple-system-body, um die komplette Font-Definition zu setzen (also Fontname, Größe, etc.) und überschreibt dann die font-famlily separat:
@supports (font: -apple-system-body) {
:root {
font: -apple-system-body;
font-family: 'Courier New', Courier, monospace;
}
}So hat man auf iOS-Geräten automatisch angepasste Schriftgrößen. Wenn man das als Base-Größe verwendet, dann passt das in den anderen Größen mit rem auch wieder.
Ich hab das mal für einen Kunden untersucht, ein funktionierendes Beispiel ist hier deployed: https://nikeee.github.io/ios-dynamic-font-test/
Wer also nicht warten kann und jetzt eine Lösung braucht, die vielleicht nur auf iOS funktionieren muss (z. B. bei einem WebView in einer App), dann hat man hiermit eine okayish lösung. Auf Android funktioniert sie natürlich nicht. Das Ganze mit env-Vars zu standardisieren wirkt auf mich aber noch deutlich sinnvoller.