スマホで文字が勝手に拡大される？text-size-adjustで解決する方法

どうも、くまだです。

スマホでサイトを確認したとき、「あれ、ここの文字だけでかくなってる？」ってなったときの対処メモ。

CSSで font-size を指定しているのに、スマホで表示すると一部の文字だけ勝手に大きくなる。デザインカンプ通りに組んだはずなのに、実機で確認したら崩れてる。

なぜ文字が勝手に拡大されるのか

スマートフォンのブラウザには「テキスト自動サイズ調整（Text Autosizing）」という機能があります。

もともとスマホのブラウザは、PC向けに作られたサイトを縮小表示していました。そのとき文字が小さくなりすぎて読みにくくなるので、ブラウザが「ここは読む必要がある文章だな」と判断して、文字を自動で拡大する仕組みを持っているんです。

問題なのは、レスポンシブ対応済みのサイトでもこの機能が働いてしまう。ちゃんとスマホ用にCSSを書いているのに、ブラウザが余計なお世話で文字サイズを変えてしまうケースがあります。

特に起きやすいのは以下のような状況です。

text-size-adjust は、ブラウザのテキスト自動サイズ調整を制御するCSSプロパティです。

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

値は以下の3種類があります。

値	意味
100%	自動調整をしない（指定した font-size のまま表示）
none	自動調整を完全に無効化（非推奨）
auto	ブラウザに自動調整を任せる（デフォルト）

ほとんどのケースで 100% を指定するのが正解です。none は後述の理由から避けたほうがいいです。

基本的な書き方はシンプルです。body か :root に一行入れておけばOK。

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

-webkit- プレフィックスは iOS Safari 向けです。

リセットCSSやベーススタイルに最初から入れておく習慣にしておく。