text-size-adjust
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
text-size-adjust
は CSS のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。
/* キーワード値 */
text-size-adjust: none;
text-size-adjust: auto;
/* <percentage> 値 */
text-size-adjust: 80%;
/* グローバル値 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: unset;
モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800px や 1000px などのより広い幅のビューポートでレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。
こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 text-size-adjust
プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。
構文
text-size-adjust
プロパティは none
, auto
, <percentage>
の何れかで指定します。
値
none
-
ブラウザーのテキスト自動拡大アルゴリズムを無効化します。
auto
-
ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した
none
値を取り消すのに使います。 <percentage>
-
ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。
公式定義
初期値 | 文字拡大に対応しているスマートフォンブラウザーならば auto 、それ以外の場合は none (そして変更不可)。 |
---|---|
適用対象 | すべての要素 |
継承 | あり |
パーセント値 | 可、テキストのフォントの対応する寸法に対する相対値 |
計算値 | 指定通り |
アニメーションの種類 | 計算値の型による |
形式文法
text-size-adjust =
auto |
none |
<percentage [0,∞]>
例
基本的な無効化の使用方法
上記に示すとおり、適切に設計されたレスポンシブサイトでは、text-size-adjust
の動作は必要ありませんので、開発者は none の値を指定してこれをオフにすることができます。
p {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
仕様書
Specification |
---|
CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- Apple のドキュメント
- Gecko's behavior description, by L. David Baron
- Microsoft のドキュメント