【iOS】SafariでCSS指定のフォントサイズが適応されないときの対処法

2022/03/06

iPhoneのSafariでこの記事を閲覧すると、なぜかテーブル内の文字サイズが拡大表示されてしまいます。どうやら、CSSで指定したサイズが無視されているようです。分からないのは、全てのテーブル内の文字サイズがおかしいわけではなく、一つ目のテーブルだけ文字サイズが拡大されてしまうことです。ちなみに、AndroidのChromeで見た場合にはCSSが正常に適応されていました。

環境

iOS: 14.8.1
Safari: 14.1.2

原因は「text-size-adjust」

text-size-adjustとは、CSSのプロパティで、テキストの自動拡大アルゴリズムを制御する機能です。この機能が該当テーブルに働いていたようです。(おそらく、一行あたりの文字数が多かったことが原因)

text-size-adjust を無効にする

デフォルトではautoになっているので、それを無効化します。

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

で、いけると思ったのがですが、テーブルには適応されなかったので

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

と、追記したところ、正常に文字サイズが表示されるようになりました。