iOS版Safariで文字サイズが無視される

ブラウザが持つ、文字サイズ調節機能を指定する

稀に、iOS版Safariにおいて、CSSで指定した通りの文字サイズで表示されないことがあります。

以下の例では、リード文（青く塗られた部分）が異常に大きくなってしまい、小見出し（赤く塗られた部分）よりも目立ってしまっています。

CSSではリード文の文字サイズを小さく指定してあるのにも関わらず。

そんなときは、ブラウザがもつ文字サイズの調節機能を指定すれば解決します。

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

これで正しく表示されます。

-webkit-text-size-adjustというプロパティは当然ながらwebkitを用いているブラウザのみ有効です。

よってAndroid端末のデフォルトブラウザでは効果がありませんが、Android版 Google Chromeでは有効になります。

ちなみに、値に200%を指定すればすべての文字が２倍になります。

noneを指定することもできますが、ユーザーがみずから文字サイズを調節することができなくなり、ユーザビリティーが悪くなるので非推奨です。

Android版 Google Chromeでのバグ

先ほどAndroid版 Google Chromeで有効だと述べましたが、場合によっては文字サイズが大きいままである時があります。

そんなときは、文字サイズを最適化させたい要素に、max-height:100%を指定してください。

max-height: 100%;