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

2023/10/05 著者:牧野健人

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

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

株式会社リラクス代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

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

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の値にnoneを入れることでも文字サイズの調整を効かなくすることができますが、これは非推奨です。

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

WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。
text-size-adjust – CSS: カスケーディングスタイルシート | MDN

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

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

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

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