I want to adjust my application font according to the ios system text scale like above I have shared a Image of a apple device settings that applied to overall font size including device UI. but in my app it doesn't changing it's font size ie larger to smaller.
Below attached screenshot for ios text size acce
Hi Dibs,
This seems to be a duplicate from this question. There's no need to duplicate questions. Hopefully you'll get a solution soon.
There is no direct solution to achieve this like using javascript or css to dynamically detect the systems font size and auto adjust the app font size within the app are not possible. But we can achieve this by writing custom Cordova plugin that allows you to detect & change the device's system-wide font size from within an application. On iOS, Apple restricts apps from modifying system settings, including font size, for security and user experience reasons.
Since OutSystems mobile apps run on Cordova, you can create a custom Cordova plugin to fetch the iOS text scale and apply it to your app.
You’ve noticed that when you change the text size setting on an iPhone — like making text bigger in the iOS Accessibility settings — it changes the size of system fonts (like in Messages, Settings, etc.), but your app’s text doesn’t change at all. It stays the same small or normal size.
Your app is built as a web app (in OutSystems), not a native iOS app. Web apps use standard web code (HTML and CSS), and unfortunately, iOS doesn’t automatically pass on those “larger text” settings to web pages — unless you help it a little.
Stop using fixed sizes like “16px” and start using flexible ones like “1rem” When you use sizes like 1rem instead of 16px, the text becomes more flexible — like saying "1x the normal size" instead of "exactly this size." That way, when the system or browser zooms in or scales text, your app text will also grow/shrink.
for example,
H1{
font-size : 16px;
}
instead of this use this -
font-size : 1rem;