Androidでフォントサイズが大きくなる！？解決するCSSの書き方

スマートフォン用サイトのCSSを記述していると、必ず発生する「Androidのフォントサイズが大きくなる！」問題。毎回、解消する為のCSSの書き方を調べたり、前に書いたCSSを読み起こしたり...

忘れない為の対策として、ベーステンプレを作る等々色々あるでしょうが、一向に覚えられない（覚えようとしない？）根本的な原因は別にあるのです。
毎回調べるを繰り返してしまう原因は「問題の原因」ときちんと向き合わないからです。
もう繰り返さない為にも、何故Android端末のフォントサイズが大きくなるのか？を調べました。

PR

原因｜なぜAndroidではフォントが大きく表示される？

スマートフォンではWEBページが見やすいように、端末毎にテキストを自動調整する機能が備わっています。横向き、縦向きにした時の自動調整もそのひとつ。
Andoroid OSだから文字が大きくなるわけではなく、端末毎に仕様が異なるのです。
という事は、たとえiPhoneでも端末を縦から横に変えたら、とんでもない大きさの文字になってしまう事になります。

一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。

モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅のビューポートでレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。

text-size-adjust｜MDN Web Docs

Googleではモバイル ファースト インデックス、スマホサイトをページ評価の基準としているくらい、スマホでのサイトの見え方は重要になっています。

画面サイズが小さいスマホで、大きな画面サイズで指定されたサイトをみると必然的に文字は小さくなります。これを回避するために、文字を自動的に大きくしてくれる機能があるのですね。

つまり、CSS上でフォントサイズを12pxと指定していても、自動的にフォントが大きく表示されるという事なんですが、端末によっては文字が異様に大きくなりデザインに影響が出てしまいます。

対策｜text-size-adjust プロパティをCSSで指定

では一体どうすれば良いのか？
今までは、理由もわからず検索結果の上位で出てきた｛max-height: 100%;｝を使っていました。

しかし今回調べたことにより MDN Web Docs で解説されている中に、有効な対策方法がある事がわかりました。

文字の自動調整を制御するプロパティ text-size-adjust です。

今回のフォントサイズが大きくなる問題には、倍率を100％で指定し制御します。
私は、ページ全体に適用させたいので＜body＞に指定する事にしました。

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

値をnoneにした時も自動調整が無効になるのですが、PCのCSSと兼用していた場合、パソコン版のブラウザで文字だけが拡大縮小しない事になるそうです。ページを拡大させても、画像だけ大きくなって文字はそのままという感じですね。

一部ブラウザでは未対応であったり、ベンダー接頭語が必要な場合があります。
どのブラウザでも対応できるよう、下記の記述で運用してみます。

body {
 　　text-size-adjust: 100%;
 　　-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
 　　-ms-text-size-adjust: 100%;/*EgdeMobile*/
 　　-moz-text-size-adjust: 100%;/*firefox*/
}

ブラウザへの対応はブラウザーの対応｜MDN Web Docsで確認できます。

レスポンシブデザインが主流となり［PC ＜ スマホ］ の構図になってきています。
今回、なぜ文字が大きくなるのかを調べた結果、まだまだ色々とインプットしなくてはいけない事が沢山ある事に気づかされました。