iOS・Androidの文字サイズ設定をWebViewに！モバイルUIのアクセシビリティTips

フロントエンドカンファレンス名古屋 2026 でのLTで使用したスライドです。

Transcript

1. モバイルUIのアクセシビリティTips おしん / @38Punkd iOS ・Android の 文字サイズ設定を WebView に！
2. ・株式会社スタメン ・iOSエンジニア ・アプリネイティブ × WebViewの 　ハイブリッドアプリ開発に携わってきました おしん / @38Punkd
3. WebView だけ、文字サイズが固定になっていませんか？ アプリネイティブ画面 OS 設定に追従 iOSの Dynamic Type や Androidのフォ ントスケールに合わせて読みやすくなる WebView 画面 標準サイズのまま ユーザーが選んだ文字サイズが Webコンテンツだけ反映されない (特にiOSで) Web とネイティブの境界にあるため、対応漏れが起きやすい
4. 文字サイズ設定は「特別対応」ではない iOS Android Android 14 以降は 最大200%のフォントスケーリングをサポート (従来は最大130%) OSの標準機能 対応工数に対して、UX 改善のインパクトが大きい領 域 出典: https://medium.com/airbnb-engineering/supporting-dynamic-type-at-airbnb- b47c68b0c998 3 割 文字サイズ調整を有効化している スマホユーザー
5. iOS WebView ：実装のポイント ① CSS: body に-apple-system-body を指定 body { font: -apple-system-body; /* iOS WebKit がサイズを 反映 */ } ② CSS: font-size は em 単位で指定 .title { font-size: 1.143em; } /* ✅ スケール する */ .description { font-size: 0.857em; } /* ✅ スケール する */ .bad-title { font-size: 16px; } /* ❌ 固定値 */ px 固定ではなく em を使うことで body のサイズ変化に追従 これだけで iOS WebKit が Dynamic Type の設定値を body のフォントサイズに反映
6. iOS ネイティブ：WebView リロード ③ Swift: Dynamic Type 変更を検知して WebView をリロード NotificationCenter.default.addObserver( self, selector: #selector(dynamicTypeDidChange), name: UIContentSizeCategory.didChangeNotification, object: nil ) @objc private func dynamicTypeDidChange() { webView?.reload() // リロード後、CSS が新しいサイズで再評価される } UIContentSizeCategory.didChangeNotification を 受信したら WebView をリロードし CSSを再評価
7. Android ：「対応できている風」に注意 文字が大きく見えても、実態は 文字だけのスケーリングではなく、Activity再生成とWebView全体ズームに 依存している場合があります 見た目 文字サイズ設定に追従しているように見える 実態 Activity 再生成でWebViewが作り直される 副作用 文字だけでなく画像・余白もズームされ得る リスク スクロール位置や入力中の状態が失われる可能性 がある → WebView WebView
8. Android ネイティブ：実装のポイント ① AndroidManifest: fontScale をconfigChanges に追加 <activity android:configChanges="fontScale|uiMode|density" ... > Activity を再生成せず onConfigurationChanged で フォントスケール変化を受け取れるようにする ② Kotlin: WebSettings.setTextZoom(int) で反映 // 初期化 applyFontScale(resources.configuration.fontScale) override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) applyFontScale(newConfig.fontScale) } private fun applyFontScale(fontScale: Float) { webView.settings.textZoom = (fontScale * 100).roundToInt() } fontScale を検知し WebView 内のテキスト全体をスケールさせる
9. Android WebView ：テキストは単位を問わずスケールされる ③ CSS:WebSettings.setTextZoom(int) の挙動 /* ✅ px 固定でも setTextZoom でスケールされる */ .title { font-size: 16px; } /* ✅ em 相対でも同様にスケールされる */ .description { font-size: 0.75em; } /* ✅ rem 相対でも同様にスケールされる */ .caption { font-size: 0.75rem; } /* ⚠ テキスト以外（幅・高さ・余白）は変化しない */ .icon { width: 48px; height: 48px; } /* → スケールされない */ WebSettings.setTextZoom(int) は レンダリングエンジンレベルで適用されるため HTML/JS の変更は不要
10. iOS ・Android 実装仕様の比較 項目 iOS Android スケール変化の検知 UIContentSizeCategory .didChangeNotification onConfigurationChanged ( fontScale ) WebView への適用 CSS font: -apple-system-body WebSettings.setTextZoom(int) スケールする単位 em px ・ em ・ rem すべてスケールされる スケールしない単位/ 要素 px 固定・ rem (ルート基準のため) 幅・高さ・余白など 非テキスト要素
11. サンプルコード iOS https://github.com/shin- carpediem/DynamicTypeWebViewDemo Android https://github.com/shin- carpediem/AndroidDynamicTypeWebViewDemo