text-size-adjust - モバイル端末の文字自動拡大を制御する

この記事では「text-size-adjust - モバイル端末の文字自動拡大を制御する」について、基本の意味と使い方を初心者向けにやさしく説明します。

　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、それ以外の場合は none (そして変更不可)。

適用対象

すべての要素

継承

あり

パーセント値

可、テキストのフォントの対応する寸法に対する相対値

計算値

指定通り

アニメーションの種類

離散値

値

none

ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKitベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。

auto

ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した none 値を取り消すのに使います。

<percentage>

ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。