フロントエンドカンファレンス名古屋 2026
LT（5分）
iOS・Androidの文字サイズ設定をWebViewに！ モバイルUIのアクセシビリティTips
おしん
38Punkd
モバイルアプリユーザーの約25〜35%が、OS設定で文字サイズを標準以外に変更していると言われています。
この設定で文字サイズを変更している場合に、アプリ内のWebViewだけ文字サイズが変わらないことがあります。
実は、iOSならCSSの font: -apple-system-body;、Androidならネイティブ側の textZoom 設定を橋渡しすることで、Web側にもOSの文字サイズ設定を反映できます。
このとき重要なのが、文字サイズの変化を前提としたレイアウトです。 rem によるスケーリングはもちろん、文字量に応じて高さが伸びる設計や、要素が溢れた際の柔軟な折り返しなど、拡大を許容する実装が必要になります。 OSの設定をどう受け止め、UIを最適化するか。 境界を越えた実装Tipsを共有します。