starke Font-Größenabweichungen auf Mobil-Browsern - welche Gegenmaßnahmen sind möglich?

    Während der Entwicklung meiner neuen Websites habe ich natürlich besonders die Darstellung auf Mobilgeräten im Focus. Auf meinem Android Smartphone habe ich dazu mehrere Browser installiert. Die stammen überwiegend von F-Droid. Es sind: Lightning, FOSS-Browser, Fennec, Firefox, JumpGo, Midori, PrivacyBrowser, Tint-Browser, Zirco Browser Opera Touch.


    Nur auf Firefox, Opera Touch und zwei anderen Browsern werden die Fonts in annähernd gleicher Schriftgröße dargestellt, ähnlich wie auf dem Desktopf. Opera vergrößert sogar deutlich. Aber alle anderen verringern grundsätzlich die Schriftgröße auf fast die Hälfte! Das zerschlägt das Design und macht die Websites kaum lesbar.


    Daraufhin habe ich testweise einige fremde Websites gegen geprüft: Die haben das gleiche Problem. – Frage nun: Gibt es bei vernünftigem Aufwand Möglichkeiten, dieser eigenwilligen Browser-Darstellung entgegen zu wirken? … Und – wie löst Ihr dieses Prolem?

    Im Normalfall definiert man genau 1 Schriftgröße in Pixel oder überlässt es dem Browser seine Grundgröße zu nehmen (meist 16px). Alle anderen gibt man in rem an, manchmal in em; seltener Prozente, manchmal auch ohne einheit.


    Bootstrap-SASS hat Möglichkeiten dabei, diese Werte dann auch noch per Bildschirmgröße etwas anzupassen, so, dass z.B. große Überschriften auf Desktop auf Smartphone etwas runterreduziert werden.


    Das sind dann auch so Kalkulationen mit vw wie oben ja schon gesagt.


    Firefox hat erst kürzlich dieses Problem gelöst, dass diese gewählten Grundwerte wunschgemäß umgesetzt werden, z.B. mit Bootstrap-CSS, ("so wie auf den meisten Chromium-Browsern"), nachdem ich mich tagelang damit rumgenervt habe. Soll nur sagen: "Mir mittlerweile Wurst". Bau ich halt den Text so ein, dass er das Layout nicht "vernichtet".