iOS Safariで指定したフォントサイズにならない場合の対処法

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

iOS Safariで指定したフォントサイズとは違うサイズになってしまう現象が起こりました。

iOS版のGoogle Chromeだとちゃんと指定したサイズになっていたので、iOS Safariが原因だと分かりました。
調べてみると、どうやら「iOS Safariには自動でフォントサイズを調整する」機能があるようです。

他にも、文章の最後の1文字だけ改行されてしまう現象があったり、思ったように実装できていないことがiOS Safariではたまにあります。

Webrandum

iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法

https://webrandum.net/ios-safari-last-character-new-line

最近iOS Safariで起きた現象とその対処法についてまとめておきます。ブラウザ表示のトラブルといえばIEでばかり起きるもののイメージがあったのですが、最近意外とSafariで見たときに「あれ？」となることが増えてきました。文章の最後の1文字だけ改行されてしまう横幅が足りなくて改行されているのではなく、明らかに横幅は余裕があるのに、最後の1文字だけが改行されてしまいました。原因としては下記のようなことがあるみたいなのですが、自分の場合はdisplay: inline-block;でフォントサイズを14pxで文字数が全角13文字のときに発...

注意して確認するようにしないといけませんね。

-webkit-text-size-adjustの設定

iOS Safariには、1行あたりの文字量が多くなりすぎると読みにくくなるため、自動で文字を大きくして一定の文字量に保とうとする機能があります。

自分の場合、気がつかなかっただけかもしれませんが、ポートレートモード（縦向き）ではあまりこの現象を見たことがありませんでした。
しかし、ランドスケープモード（横向き）にしたときにこの現象を見つけたので、気になる方は1度ランドスケープモードにして確認してみるとよさそうです。

指定したフォントサイズを、勝手に拡大されてしまうのは大きなお世話です。
この機能は-webkit-text-size-adjustというプロパティで、100%を指定すると無効化できます。

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

正直、わざわざランドスケープモードにしてサイトを見る人は少ないと思いますが、場合によってはポートレートモードでも発生するかもしれませんので、リセットCSSに組み込んでおくのがよさそうです。

noneを指定してはいけない

noneを指定しても、自動拡大機能を無効化できるのですが、この方法だとPCのブラウザ（Google ChromeやSafari）でページの拡大機能で文字が拡大されなくなります。

つまり、noneだと文字の拡大縮小が完全にできなくなってしまうので、文字を拡大して読みたい人の使い勝手が悪くなります。

body{
  -webkit-text-size-adjust: none;
}