【cordova】※android版のみ phonegap-mobile-accessibilityでフォントサイズ変更による画面崩れを防ぐ方法

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

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

が崩れてしまいます。

さすがに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のフォントサイズが変わってアプリの画面崩れが起きてしまうというかたは試してみてください。

以上、痒い所に手が届くようなphonegap-mobile-accessibilityプラグインでした。