New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useWindowDimensions().fontScale doesn't return the expected result on mobile browsers #2647
Comments
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. So I'd say that it does depend on the browser, and they handle the general zoom, not the font scaling. |
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. |
Is there an existing issue for this?
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 valueSteps to reproduce
useWindowDimensions().fontScale
will still return 1Test 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
The text was updated successfully, but these errors were encountered: