(-webkit-)text-size-adjust の正しい使い方

CSS / Less Webサイト設計

スクリーンの小さなスマートフォンでは、PC 用に作られた幅の広い Web ページを、全体が収まるように縮小して表示する機能がある。iPhone の Safari では 980 px のスクリーンに表示した Web ページを、3.5インチないし3.7インチの画面に縮小表示している。この仮想的なスクリーンをビューポート (viewport) という。

ここで、Web ページで一般的な文字の大きさである 16 px の文字をそのまま縮小して表示すると、iPhone の画面上では 1.27 pt (0.45 mm) となり、これではとても読めない。そのためスマートフォンの Web ブラウザには文字の大きさを自動的に調整する機能がある。

その調整値を CSS で制御できるのが text-size-adjust プロパティである。

値には none (文字を拡大しない), auto (ブロックの状態により自動調整), パーセント値を指定できる。

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

text-size-adjust: inherit
text-size-adjust - CSS | MDN

実例

デモはこちら。

PC ではこのように表示される。

iPhone で text-size-adjust を指定しない場合、文字がそのまま縮小されて読めないほどの大きさになってしまう。

適切に text-size-adjust を指定することで文字が読みやすくなる。

実装方法

文字を読ませる部分に、100 % より大きな値を指定する。実機で確認して調整するのがよい。iPhone の Safari ではベンダ・プリフィクスを付けて -webkit-text-size-adjust とする必要がある (iOS 6)。

また Safari では text-size-adjust の値を 100 % より大きくすると、line-height を相対値で指定した部分の行間が広がりすぎてしまう。

そこで JavaScript で html 要素に iPhone というクラスを付けて、次のように line-height の絶対指定も併用する。

body { font-size: 16px; line-height: 1.5; }
.iPhone p { -webkit-text-size-adjust: 180%; line-height: 24px; }

参考