CODEWITHSUNDEEP
androidangularionic-frameworkionic3
furry12
furry12

Reputation: 962

Ionic 3 application - how to make font size independent of native settings?

I am developing an Ionic 3 application, I recently published it and in production, where phones of all kinds and sizes were used, I noticed that there is an android native setting called "font-size" where you can make the size of texts in your phone bigger or smaller.

Some people (among others many older people) choose 'big' or even 'huge' text size. This unfortunately affects texts in my application on their phones and completely ruins the layout.

The way I am defining font sizes in my css files is with em values, but I also tried px. Do you know if there is any way to prevent my application from adhering to this native android text-size setting? Or any other ways to fix it? Please help, Cheers

Upvotes: 6

Views: 3938

Answers (4)

yksolanki9
yksolanki9

Reputation: 519

The plugin suggested in the accepted answer was last updated in 2016. Instead of adding a new plugin, we can configure the webview settings to disable text zoom as discussed here.

So, inside MainActivity.java you can do something like this:

import com.getcapacitor.BridgeActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {
  public void onResume() {
    super.onResume();
    WebSettings settings = bridge.getWebView().getSettings();
    settings.setTextZoom(100);
    settings.setSupportZoom(false);
  }
}

Upvotes: 2

kozzztya
kozzztya

Reputation: 43

Setting text zoom with JS works with a jump from big to small size. But in MainActivity.java it applies immediately without visible delay

package io.ionic.starter;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView mWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = mWebView.getSettings();

    webSettings.setTextZoom(100);
  }
}

Upvotes: 0

Khurshid Ansari
Khurshid Ansari

Reputation: 5075

I face similar issue. I have done as below for best practice : 

this.platform.ready().then(()=>{
   this.mobileAccessibility.getTextZoom().then((textZoom)=>{
      if(textZoom>130){
          this.mobileAccessibility.setTextZoom(130); 
      }
   }); 
})

Upvotes: 0

furry12
furry12

Reputation: 962

I found the solution! I used this phonegap plugin:

https://ionicframework.com/docs/v3/native/mobile-accessibility/

and used the method this.mobileAccessibility.usePreferredTextZoom(false);

This way, my app ignores the android font size settings!

Upvotes: 3

Related Questions