font size - Mobile Accessibility using Ionic doesn't work

Question

I'm trying to make a simple Ionic app using capacitor, there's a heading in my home.page.html

<h1>Hello, World</h1>

In my .scss file I set the font-size to 20px. When I change the font size from Huge to Tiny in my settings on my device, of course the font size in my app changes, I tried to disable it, here's my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { MobileAccessibility } from '@ionic-native/mobile-accessibility/ngx';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
    providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, MobileAccessibility],
    bootstrap: [AppComponent],
})

export class AppModule {
    constructor(private mobileAccessibility: MobileAccessibility) {
        this.mobileAccessibility.usePreferredTextZoom(false);
        this.mobileAccessibility.setTextZoom(10);
    }
}

Please let me know what am I doing wrong as the documentation is old and very unclear.

question from:https://stackoverflow.com/questions/66046318/mobile-accessibility-using-ionic-doesnt-work

Answer 1

Waitting for answers