expoで標準設定の文字の大きさの影響を受けないようにする方法
abyblog
アプリの文字がiOSやAndroid端末内の文字設定が影響を受けることがあります。
影響を受けると、文字や要素の大きさが変わってしまい、想定していたデザインからずれてしまうことがあります。
端末の文字設定の影響を受けると起こること
- 要素のデザインが崩れる。
- 文字が見切れてしまい、要素をはみ出てしまう。
- 見た目が悪くなり、ユーザーの操作性の低下
このようなことを防ぐために、
この記事では、端末の文字設定の影響を受けないようにする方法を紹介します。
今回紹介する方法は、各文字ごとに設定できます。
なので、影響を受けてもいい文字は随時選択できますので、臨機応変にやってみてください！
目次（クリックで読みたい部分にジャンプできます）
【結論】PixelRatioを使用して、設定の倍率を打ち消す
では、解決方法です。
解決方法は、アプリ内でユーザーが設定している倍率を取得して、それを割ることで打ち消します。
概要
【改修前】
フォントの大きさ × 設定の倍率
【改修後】
フォントの大きさ × 設定の倍率 / 設定の倍率（PixelRatioで取得）
→これで元のフォントに戻します。
ユーザーが設定で行なっている文字の大きさ変更は、
フォントの大きさに対して「掛け算」して作用します。
そのため、フォントを設定の影響を受けないようにしたい場合は、設定の倍率を取得して、それを逆に割ってあげれば良いわけです。
では、実際のコードを見てみましょう。
コードの書き方
では、概要を理解したところで、コードを紹介します。
と言っても、そこまで難しいコードはなくフォントサイズに以下を書き加えるのみになります。
例えば、フォントサイズが16を指定している要素に対して行うとしましょう。
fontSize: 16/PixelRatio.getFontScale()PixelRatio.getFontScaleによって、ユーザーが設定した文字の倍率を取得することができます。
import文も必要
今回は、import文も必要です。
{ PixelRatio } from "react-native";以下はPixelRatioの公式ドキュメントです。
PixelRatio · React Native
まとめ
今回は、ユーザーの文字拡大設定の影響をアプリに受けないようにする方法について紹介していきました。
文字拡大の影響を受けなければ、安定したデザインを提供することが可能になります。
一方で文字を細かすぎる文字には、ユーザービリティも低下してしまいますので、適宜調節していただければと思います。
では、良いexpoライフを。
