For Accessibility: How to achieve a consistent and scalable font size across browsers?

Question

Goal

My goal is to make our WebApp more accessible to dynamic font sizes. Especially for accessibility reasons, where people set bigger font sizes.

Context / Progress so far:

The WebApp is used on desktop and within our native Apps as a WebView. Our target audience uses mainly:

• Safari desktop browser
• Chrome desktop browser
• Safari on mobile devices (iOS) as a WebView
• Chrome on mobile devices (Android) as a WebView

So far I found out, that the 'normal' way to do this, is by setting font-size: 100% on root/html level and then reference it via rem (or through em but that sounds a bit hard to maintain on a multi level architecture).

The problem is, that this does not work for the Safari WebView case. Here it seems necessary to read a special variable, which I found on this Thread: How to get the accessibility font size for iOS and Android in Xamarin.Forms so I can change font-size in a HTML WebView?

Now it really starts to get interesting, because using this value gives different values depending on is it Safari Desktop or Safari WebView, while Chrome of course does not know this value and uses its 'normal' 100% value. Here is a list of what I debugged, using normal font sizes:

• Chrome: 16px
• Safari Desktop: 13px (with -apple-system-body)
• Safari WebView: 17px (with -apple-system-body)

The Problem

My goal is to have one consistent UI across the browsers, so if I would just use those values combined with rem I would get a way smaller text size on Safari than on Chrome for example.

My main question is:

Is there a more elegant way to solve the dynamic font size issue, while keeping a consistent UI across browsers? Or is there an elegant CSS / LESS solution towards unifying the above values to one value, while keeping it reactive to system font settings?

Not desired solution:

The only solutions I can think of, would be reading out those values with javascript, detecting the browser, normalising it accordingly and setting it back. But I would like to avoid that solution, because it seems quite unstable to me, especially if maybe at some point Apple updates Safari to use different standard font sizes.