スマートフォンサイトの文字サイズを制御する方法

以下コードをCSSに記述します。

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

ただ、これだとiPhoneは改善されるけどAndroidでは文字サイズが大きいまま。というのは、Androidの場合は、viewportのscale値を指定しないとこの指定が有効にならないんです。なので、head内に

<meta name="viewport" content="width=980, maximum-scale=1.0, user-scalable=yes">

のように記述することで問題は解決します。 ちなみに、上記の設定内容は以下の通りです。

width=980
画面幅を指定します。ここでは980pxに指定してます。
maximum-scale=1.0
ユーザーが操作できる最大の拡大率。ここでは1.0倍に指定してます。
user-scalable=yes
ユーザーがズーム操作することを許可するかどうか。許可しない場合は「no」。

それでも、Android x Chromeだと文字サイズが大きいままという現象が… 実は先日、Android(私が遭遇したのは4.2)のChromeで文字サイズが大きいままになることがありました。HTMLを見てもCSSを見てもまったく原因が分からず半日。ようやく対処法が見つかりました。

上記の記事で、まさしく今回の解決方法が掲載されていまして、この記事の通りに文字サイズが大きくなっているclassなりidなりに、

max-height: 999999px;

または

max-height: 100%;

と追記してあげることで解決します。私は100%で書いてみましたが、無事に文字サイズが最適な大きさになりました。