Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

text-size-adjust

モバイルブラウザはデスクトップ向けページを表示する際にテキストサイズを自動拡大することがありますが、text-size-adjust でこの動作を制御できます。レスポンシブデザインが適切に実装されている場合に、不要な自動拡大を防止するために使用します。100% に設定すると自動調整を無効化します。

モバイル対応テキストサイズ

概要

モバイルブラウザはデスクトップ向けページを表示する際にテキストサイズを自動拡大することがありますが、text-size-adjust でこの動作を制御できます。レスポンシブデザインが適切に実装されている場合に、不要な自動拡大を防止するために使用します。100% に設定すると自動調整を無効化します。

対応ブラウザ

デスクトップ

Chrome 54+
Edge 79+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 54+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

実務での使いどころ

  • モバイルでのテキストサイズ固定

    レスポンシブデザインのサイトで、モバイルブラウザによる不要なテキスト自動拡大を防止します。

注意点

  • text-size-adjust: none は絶対に使用しないでください。ユーザーがピンチズームでテキストを拡大できなくなります。

アクセシビリティ

  • WCAG 1.4.4 に準拠するため、text-size-adjust: none は使用せず、常にユーザーがテキストサイズを調整できるようにしてください。

参考リンク