text-size-adjust
text-size-adjust は CSS のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。
モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、ビューポートを 800px や 1000px などのはるかに広い幅としてレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。
こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。text-size-adjust プロパティを使用すると、ウェブ制作者はこの動作を無効にしたり変更したりすることができます。これは、小さな画面を想定して設計されたウェブページでは、この動作が必要ないためです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
text-size-adjust 実験的 | 54 | 79 | | | 54 | 1 |
auto 実験的 | 54 | 79 | | | 54 | |
none 実験的 | 54 | 79 | | | 54 | |
percentages 実験的 `<パーセンテージ>` | 54 | 12 | | | 54 | |
注釈 2件
削除済み
- このバージョンで機能が削除されました (79)
対応条件
- ベンダープレフィックス付きで対応: -webkit- (12)
基本構文
CSS
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}ライブデモ
実務での使いどころ
-
モバイルでのテキストサイズ固定
レスポンシブデザインのサイトで、モバイルブラウザによる不要なテキスト自動拡大を防止します。
注意点
- text-size-adjust: none は絶対に使用しないでください。ユーザーがピンチズームでテキストを拡大できなくなります。
アクセシビリティ
- WCAG 1.4.4 に準拠するため、text-size-adjust: none は使用せず、常にユーザーがテキストサイズを調整できるようにしてください。