iOSでOSの文字サイズ設定を変更しても、ブラウザで文字の大きさが変わらない

iOSでは、設定の「画面表示とテキストサイズ」にある文字サイズ設定を変更したとき、iOSアプリで表示されている文字サイズを変更することができます。
しかしブラウザで表示しているwebサイトの文字サイズは（多くの場合）変わりません。

iOSのアプリケーション開発の文脈では、この文字サイズ可変について「Dynamic Type」と呼んでおり、予め用意されているtext styleを選択することで有効になります。
https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically

iOSのブラウザ上で、このDynamic Typeを有効にするためにはfont:-apple-system-body; の指定が必要になります。

font:-apple-system-bodyで何が起きるか

• 文字サイズが、OSの設定値で上書きされる
  • iOSでOSの設定がデフォルトの場合、16px > 17px
• 字体が-apple-systemと同様に変更される
  • 英数字はSF
  • 日本語はHiragino-sans
    • 日本語に1px程度の縮小処理

-apple-system-bodyが指定できるプロパティ

fontプロパティでは、font-size、font-family、line-heightなどをまとめて指定できるショートハンド指定の他に、font:icon; のようにキーワードを指定してシステムフォントの値でまとめて設定できる指定があります。
https://drafts.csswg.org/css-fonts-3/#font-prop

-apple-system-body はシステムフォントの値を指定するためにappleが独自に設定した値で、次のような値が用意されています。

-apple-system-headline
-apple-system-subheadline
-apple-system-short-headline
-apple-system-short-subheadline
-apple-system-body
-apple-system-short-body
-apple-system-tall-body
-apple-system-caption1
-apple-system-caption2
-apple-system-short-caption1
-apple-system-footnote
-apple-system-short-footnote

それぞれの値でfont-sizeやfont-weight、font-styleなどが異なります。

これらの値はfont-familyの他にfont-sizeなどの値も置き換えるためのキーワードです。そのためこのキーワードをfont-familyで直接指定することはできません。

NG:

font-family: -apple-system-body;

OK:

font: -apple-system-body;

font-sizeへの影響

要素に font:-apple-system-body; を指定した場合、font-sizeが変更されます。OSの文字サイズ設定がデフォルトの場合、設定される値は次のとおりです。

	未指定	-apple-system-body
iOS(Safari、Chrome、Firefox)	16px	17px
macOS(Safariのみ)	16px	13px

• この設定値の詳細についてはOSの文字サイズ設定変更時の挙動で後述します。

font:-apple-system-body;指定した要素で、font-sizeを指定（上書き）してしまうと、Dynamic Typeが無効になります。

NG:

p{
   font-family: -apple-system-body;
   font-size: 16px;
}

1emや100%といった描画上はサイズが変わらないはずの指定であっても、font-sizeの指定があれば無効になりす。

NG:

p{
   font-family: -apple-system-body;
   font-size: 100%;
}

子孫要素については挙動が異なり、文字サイズの調整が可能です。
このとき、font-sizeは%やem、remなどの親やルートに対する相対単位である必要があります。

OK:

ul{
   font-family: -apple-system-body;
}
li{
   font-size: 130%;
}

それ以外の単位の場合、Dynamic Typeは無効になります。

NG:

ul{
   font-family: -apple-system-body;
}
li{
   font-size: 20px;
}

まとめると、以下のいずれかの場合でのみDynamic Typeが有効になります。

• -apple-system-bodyを指定していて、かつその要素にfont-sizeの指定がない
• 祖先に-apple-system-bodyを指定していて、要素のfont-size に%やem、remなどの親やルートに対する相対単位を指定している

font-familyへの影響

要素に font:-apple-system-body; を指定した場合、描画される字体は font-family:-apple-system; を指定した場合と同様になります。

• 英数字はSF
• 日本語はHiragino-sans
  • 日本語に1px程度の縮小処理（この処理の結果はComputedStyleには反映されない）

-apple-systemによる日本語縮小処理についてはこちらで解説しています。
https://qiita.com/a_t/items/18693be11bd87f98d212

font:-apple-system-body;を指定した後、font-sizeを上書きした場合はDynamic Typeが無効になりますが、font-famiyを上書きした場合Dynamic Typeは有効なままです。

そのため、次のような指定で、Dynamic Typeを有効にしつつ字体を変更することができます。

div {
    font: -apple-system-body;
    font-family: "Arial", "Hiragino Maru Gothic ProN", sans-serif;
}

OSの文字サイズ設定変更時の挙動

iOS

iOSでは、設定 > アクセシビリティのなかにある画面表示とテキストサイズのさらに大きな文字にあるスライダーを変更すると、文字サイズが拡大/縮小されます。（デフォルトではスライダーの中央部分が選択された状態）

このとき、-apple-system-bodyが指定された要素のfont-sizeの値も変わります。スライダー位置がデフォルトの場合17pxで表示されます。

変更された値は、JSのgetComputedStyleで確認することができます。またブラウザの開発ツールのCSSパネルからも確認できます。

iOSでは、Safariのほかに、Chrome、Firefoxでも同様の挙動になります。

macOS

macOSでは、OS全体で文字サイズを変更するような設定は用意されていません。（アプリケーションごとに準備された方法で文字サイズを変更することは可能）
https://support.apple.com/ja-jp/guide/mac-help/mchld786f2cd/mac#apdd3efcf7d62154

しかし、macOSのSafariでは-apple-system-bodyが指定された要素のfont-sizeは13pxに変更されます。

macOSのChromeとFirefoxでは-apple-system-body;は無効のため、font-sizeは変更されず、16pxのままです。

ブラウザの文字サイズ設定変更時の挙動

iOS Safariではアドレスバーの隣の「ぁあ」というボタンを選択したときに表示されるメニューから、表示の拡大縮小を設定することができます。
iOSの他のブラウザについても、各ブラウザで表示の拡大縮小を設定するオプションを提供している場合があります。

OSではなくブラウザが用意している文字サイズ変更機能では、font: -apple-system-body;の有無に関係なく、文字サイズの拡大縮小が行われます。

まとめ

:root{
    font: -apple-system-body;
}

elem{
    font-size: 1rem;
}

• 日本語は縮小処理によって1px程度縮小されるため、1remを指定したとき日本語は16px相当で、英数字は17pxで表示される
• macOSのSafariでのみ大きく表示が異なる

できるだけ表示の差異をなくしたい場合

@font-face {
    font-family: "ff-apple-system";
    src: local(-apple-system);
}

:root{
  font-size:106.25%;
}

@supports (-webkit-touch-callout: none) and (font: -apple-system-body){
  :root{
    font: -apple-system-body;
    font-family: ff-apple-system, sans-serif;
  }
}

elem{
    font-size: 1rem;
}

• font-size:106.25%;で、すべての環境でルートのfont-sizeを17px相当に変更
• @supports (-webkit-touch-callout: none) and (font: -apple-system-body) 以下でfont: -apple-system-body; を設定
  • -webkit-touch-callout: noneをサポートしていないmacOSのSafariでは、-apple-system-bodyが当たらない
• -apple-system-body指定後のfont-family: ff-apple-system, sans-serif;で、日本語の縮小処理をキャンセル（font-faceを経由して-apple-systemを指定することで、縮小処理はキャンセルされる）

これにより、どの環境でも

• remの基準値は17px
• 日本語も縮小されず17px相当で表示

となります。

※ font-faceを経由した日本語の縮小処理のキャンセルや、@supports (-webkit-touch-callout: none) によるmacOS / Safariの除外は今後の動作を保証するものではないため、バージョンアップによって崩れる可能性があります。