【CSS】スマホで文字サイズが大きくなる時の解決法と原因

執筆者:牧野健人

「スマホでのみ、文字サイズがCSSで指定しているサイズよりも大きく表示されてしまう時」の解決法と原因を解説します。

bodyセレクタにCSSを2行追加すれば解決するので、非常に簡単です。

スマホで文字サイズが大きくなる時の解決法

CSSに下記を追加することで、スマホで勝手に文字が大きならないようになります。

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

スマホで文字サイズが勝手に大きくなる原因

スマホで文字サイズが大きくなる原因は、スマホのブラウザで文字サイズを自動調整する機能が働く場合があるからです。

というのも、今の時代でもまだスマホ対応していないWebページも存在しており、PC用のページをスマホの小さな画面に収まるように表示すると文字サイズが極端に小さくなってしまう可能性があります。

そういった場面で「ユーザーがWebページの文字を読めない」という事態を避けるために、スマホのブラウザが文字サイズを自動的に大きく調整することがあるのです。

場合によっては、ページ全体でレスポンシブ対応している場合も、特定の箇所で文字サイズの調整が働くこともあります。

以上がスマホで文字が勝手に大きくなる原因なので、それを防ぐには、不要な場合には自動調整が効かないように設定すればよいということになります。

そのために必要になるのが、上述したtext-size-adjust(ベンダープレフィックス:-webkit-text-size-adjust)です。

その値に 100% を指定すれば、CSSで指定した文字サイズ通りに文字が表示されるようになります。

text-size-adjustの注意点

text-size-adjustの値にnoneを入れることでも文字サイズの調整を効かなくすることができますが、これは非推奨です。

なぜなら、古い環境(Chrome 26以下, Safari 5以下)ではユーザーによる意図的な拡大・縮小までできなくなってしまうバグが確認されているからです。

WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。

text-size-adjust – CSS: カスケーディングスタイルシート | MDN

text-size-adjustnone100%は、いずれも文字サイズをCSSで指定した通りに表示することには変わりありませんので、バグが無い100%を用いた方がよいでしょう。

スマホで文字サイズが大きくなる時の解決法と原因:まとめ

スマホで文字サイズが勝手に大きくなる原因は「スマホブラウザによる文字サイズの自動調整機能」が働くからです。

下記のCSSを追加することで、自動調整の影響を受けなくなり、勝手に文字サイズが大きくなる問題は解決されます。

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

この記事の執筆者

牧野健人

牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。