useWindowDimensions().fontScale doesn't return the expected result on mobile browsers

[Sharcoux]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

When updating this option on Android:

We should be able to detect the change of the font size with useWindowDimensions().fontScale

Expected behavior

useWindowDimensions().fontScale should return the updated value

Steps to reproduce

• On android, access the app through a web browser
• Go to Parameters => Display => Font Size
• Update the font size
• useWindowDimensions().fontScale will still return 1

Test case

https://codesandbox.io/p/sandbox/rnweb-fontsize-j9mk53?file=%2Fsrc%2FApp.js%3A6%2C28-6%2C47

Additional comments

I think that we could easily solve that by returning parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size')) / 16 for fontScale.

Another option would be: https://brokul.dev/detecting-the-default-browser-font-size-in-javascript

[lemcz]

I don't really know about Android, but on iOS you can set zoom level separately in the Safari's settings. The system's font size settings that you're referring to do not affect websites content. In Chrome (iOS) I couldn't even change the zoom, and the system's font size setting affected only browser's UI, not the website's content.

So I'd say that it does depend on the browser, and they handle the general zoom, not the font scaling.

[Sharcoux]

On Android, the issue is a bit more complex. You can find all the details here

Basically, if you change the font scale in Android params, the browser will apply that scale on the computed style, but only on the fontSize property. This leads to a major problem for developers because, if you set the fontSize of a TextInput to 10px, and the user uses a font scale of 1.2, the TextInput will instead have a fontSize of 12px. Now, if your code also sets the width and height based on the fontSize you provided, you'll end up with a problem because your dimensions are planned for a fontSize of 10px, not 12. For instance, you could specify the lineHeight to be the same of the fontSize, and that would break your design on android.

To clarify, the problem is that the fontScale is being silently applied on the fontSize, but not on the other dimensions.

Notice that ReactNative provides the fontScale value, probably for that specific case. That's why I think it might be important to fix it in RNWeb.