浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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プラグインでした。

  • この記事いいね! (0)