Hello,
We have build an app using Ionic React (currently v7.5) which runs on iOS, Android and as web app in the browser.
We have followed Ionic’s Dynamic Font Scaling guide (Dynamic Font Scaling | Ionic Documentation) to enable dynamic font scaling for iOS and Android. We have changed all font-sizes and line-heights in our CSS files from px to rem using a conversion rate of 16px to 1rem. After that change, dynamic font scaling on iOS and Android devices works.
What we have noticed is that a conversion rate of 16px to 1rem is pretty common. The exception is iOS, which uses a conversion of 17px (default font size) to 1rem. This is also mentioned in Ionic’s Dynamic Font Scaling guide (last section). This causes layout issues in our app on iOS devices in certain places since our UX designer has designed everything in px units and some texts are included in other graphical components that have a certain height (in px).
The solution would be to change the default font size for iOS to 16px, so the same conversion rate is applied to all target platforms (iOS, Android, web).
We can set the default font size to 16px using the following code in our CSS file:
html {
font-size: 16px;
}
This will change the default font size to 16px on iOS. However, dynamic font sizing is not working after this change.
Question: is there a way to change the default font size to 16px for iOS while keeping the dynamic font sizing feature enabled?
Kind regards,
Ronald