We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

text-size-adjust プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。

/* キーワード値 */
text-size-adjust: none;
text-size-adjust: auto;

/* <percentage> 値 */
text-size-adjust: 80%;

/* グローバル値 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅のビューポートでレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 text-size-adjust プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。

初期値auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).
適用対象全要素
継承継承する
パーセンテージyes, refer to the corresponding size of the text font
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

text-size-adjust プロパティは none, auto, <percentage> の何れかで指定します。

none
ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。
auto
ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した none 値を取り消すのに使います。
<percentage>
ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。

形式文法

none | auto | <percentage>

仕様書

仕様書 策定状況 コメント
CSS Mobile Text Size Adjustment Module Level 1
text-size-adjust の定義
編集者草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

54

なし -webkit- 1

12 -webkit- なし なし42

なし

なし -webkit- 3

<percentage> ? あり なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5454

あり -ms-

あり -webkit-

あり -moz-

49 -webkit-

44 -webkit- 2

42 あり -webkit- 6.0
<percentage> ? ? あり なし なし あり ?

1. Instead of ignoring the -webkit-text-size-adjust property, a bug prevents desktop Chrome users from zooming in or out. The bug was fixed after Chrome 26.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Instead of ignoring the -webkit-text-size-adjust property, a bug prevents desktop Safari users from zooming in or out. The bug was fixed after Safari 5.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, unarist
最終更新者: mfuji09,