【cordova】phonegap-mobile-accessibilityでフォントサイズ変更を固定する

androidでアプリを起動中にユーザー設定→フォントサイズを変更をすると

アプリの中のテキストやボタンが選択したフォントサイズと同じになり画面

が崩れてしまうことがあります。

cordova側からではosの制御はできないと思っていましたがcordovaプラグインに

phonegap-mobile-accessibilityというandroidOSでフォントサイズを変更してもアプリに反映されるのを

防ぐ役割を持ったありがたいプラグインがあることを知りました。

cordovaでの実装方法はindex.jsの中のstartApp関数の中に

window.MobileAccessibility.usePreferredTextZoom(false);と指定するだけ。

index.jsはアプリで一番最初に読み込まれるファイルなのでここにコードを書きます。

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
  window.MobileAccessibility.usePreferredTextZoom(false);
};

これを実装したandroid版アプリで設定からフォントサイズを変更して見てください。

どのサイズを選択してもデフォルトの大きさのままフォントを保っているのが見て取れると思います。

ステータスバーの値だけ大きさが反映されていますがアプリの画面崩れはこれで防ぐことができました。

なお、iosでこれを実装するとcordova prepare iosの際に警告がでますが今は無視で構わないでしょう。

androidのフォントサイズが変わってアプリの画面崩れが起きてしまうというかたは試してみてください