Mobile Accessibility using Ionic doesn't work

user_15145198 0
Viewed 550

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.

ionic-framework font-size
1 Answers

try in v4 ionic

declare var window: any;

and

getTextZoomCallback(textZoom) { // is my function callback
  console.log('Current text zoom = ’ + textZoom + ‘%’)
}

call in init

window.MobileAccessibility.getTextZoom(this.getTextZoomCallback);

great success!!

user_33602220
Related