iOS SafariでCSSのフォントサイズ効かない時に対処する方法

css

ちゃんとCSSでフォントサイズを指定しているのに、なぜかiOSのSafariでフォントサイズが効かないってことはありませんか？

どういった条件でCSSが効かないのか

スマートフォンでは表示領域がPCと比べて狭いため、一般的に使われるテクニックとして、テーブルに横スクロールを実装して見やすくすることがあります。これを実装したタイミングで今回のフォントサイズが効かない現象がおきました。

フォントサイズが効かなかった条件は以下のとおりです。

• テーブルセル内のフォントサイズ
• white-spaceで nowrapを指定（折り返しさせない）
• 画面幅以上の文字が入っている場合

実際の画面

3列目のセルだけフォントサイズが効いてない

解決方法

htmlに対して「-webkit-text-size-adjust: 100%;」を指定します。

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

もしhtmlで効かなければtdに直接適応させてください。

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

これでiOSのSafariでも問題なくCSSのフォントサイズを機能させることができます。