CODEWITHSUNDEEP
androidcssionic-frameworksassfonts
Ragesh Pikalmunde
Ragesh Pikalmunde

Reputation: 1403

how to increase font size of ionic app according the device font size

I am developing an Ionic 4 application, I have a defined font-size of 14px in the app but there is an android native setting called "font-size" where users can make the size of texts on the phone bigger or smaller.

people can choose 'big' or even 'huge' text size and unfortunately, this affects the text size of the app on the phone and ruins the layout.

eg: text on the button goes out of the defined box if device font-size is huge.

I know that there is an accessibility plugin available that can help me to keep the app's font-size size as it is but I don't want that.

Is there any way to increase the font size of the app according to the font size of the user's device in ionic?

Upvotes: 1

Views: 3351

Answers (2)

flyer
flyer

Reputation: 1424

Capacitor v3 has a @capacitor/text-zoom plug in. I find that I only need to use it on iOS. On Android, the adjusted text size in the settings app is applied automatically to my ionic app.

So on iOS, I call getPreferred() to get the adjusted text size from settings. If not === 1, I call set() to apply the scaling.

import { TextZoom } from '@capacitor/text-zoom';
setTextZoom(value: number): void {
   void TextZoom.set({ value });
}

If you look at the source code of the plugin (https://github.com/ionic-team/capacitor-plugins/blob/main/text-zoom/src/ios.ts), you can see that it is adding a -webkit-text-size-adjust to the body element:

document.body.style.webkitTextSizeAdjust = value;

This is only supported on mobile browsers (won't have any impact on desktop) It controls how the text-inflating algorithm is applied to textual elements on the web control.

This can be hard to debug. What I do is to run the ionic app on a mac laptop in the iOS simulator (launched from XCode) and then attach the debugger using Safari Technical Preview app. Under the Develop menu, you can find the iOS Simulator and connect to your running app. Then you can check out the DOM in the app and see the -webkit-text-size-adjust setting applied to the body element. You can then change it in the dev tools to see the effects on the application.

Upvotes: 1

Nikhil Sharma
Nikhil Sharma

Reputation: 847

! Warning !

I might be just aiming for bird eye in dark room, and answer could be very wrong.

You can try this gentle men's answer

You can find the plugin here:

platform.ready().then(() => {
    [...]
    if(window.MobileAccessibility){
       window.MobileAccessibility.usePreferredTextZoom(false);
    }
    [...]
});

Original Source: IonicFramwork Forms

Original Answer By: hersonls

Upvotes: 0

Related Questions