MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

text-size-adjust

この翻訳は不完全です。英語から この記事を翻訳 してください。

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

text-size-adjust プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。このプロパティは標準化されていないため、-moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust のように必ずプレフィックス付きで使用する必要があります。

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

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。

text-size-adjust プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更することができます。

註:
  • このプロパティは非標準です。適用したいブラウザに応じたプレフィックスを付ける必要があります。
  • このプロパティの挙動や構文はブラウザによって異なります。詳しくはこの下にあるブラウザ実装状況のセクションを確認してください。
  • このプロパティはスマートフォンと一部タブレット端末でのみ機能します。 デスクトップブラウザと一部タブレット端末ではテキストの自動拡大アルゴリズムを持ちません。
  • -webkit-text-size-adjust を明示的に none に設定した場合、Chrome≤26 や Safari≤5 などの古い WebKit ベースのデスクトップブラウザやタブレット端末のブラウザではこれが無視されず、ユーザーによるズーム機能を妨げてしまいます (参考)。
  • 全てのブラウザがパーセント値による指定に対応しているわけではなく、例えば Webkit や Trident は対応していますが、Gecko は対応していません。詳しくはこの下にあるブラウザ実装状況のセクションを確認してください。

初期値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
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* テキストは拡大されない */
text-size-adjust: none;

/* テキストは拡大される可能性がある */
text-size-adjust: auto;

/* テキストはこの拡大率で表示される可能性がある */
text-size-adjust: 80%;

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

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

形式文法

none | auto | <percentage>

仕様

仕様書 策定状況 コメント
CSS Mobile Text Size Adjustment Module Level 1
text-size-adjust の定義
勧告改訂案 初期定義

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 54.0[1] (有)-ms
(有)-webkit
未サポート 未サポート 42 未サポート[1]
パーセント値 ? (有) -ms 未サポート 未サポート 未サポート 未サポート
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート ? 54.0[1] (有)-ms
(有)-webkit
11.0 (11.0) -moz[2] (有) -ms[3]
11-webkit
42 (有)-webkit 54.0[1]
パーセント値 ? ? (有) -ms 未サポート (有)[3] 未サポート (有) ?

[1] There is a bug in older WebKit-based desktop browsers. If -webkit-text-size-adjust is explicitly set to none, older Webkit-based desktop browsers, instead of ignoring the property, will prevent the user from zooming in or out of the web page. See Bug 56543 (affected Safari≤5 & Chrome≤26), Bug 163359, and Bug 84186.

[2] In addition to the -moz- prefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit- prefixed version of the property for web compatibility reasons behind the layout.css.prefixes.webkit flag, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] If the viewport is set using <meta> element, the value of the CSS text-size-adjust property is ignored. See detailed implementation hints on MSDN.

関連情報

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

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