iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する

@kasumiiです。こんにちは。

iPhoneでサイトを確認したときだけ、なぜかCSSで小さく指定したはずの文字が大きくなったり、逆に大きく強調したはずのテキストが小さくなったり、おかしな現象が起こることがありました。

PCで見てるときは大丈夫なのに、iPhone版Safariで見たときだけ起こるっぽい。これの解決方法をメモメモです。

結論から言うと、

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

のように、文字サイズの自動調整をさせたくない部分に-webkit-text-size-adjustを指定すれば直りました。

-webkit-text-size-adjustって、iPhoneで画面を縦向きから横向きに切り替えたときなどに文字サイズが大きくなってしまうのを防ぐためのものだと勝手に思い込んでいたんですが、Mobile Safariさんは画面の向きを変えなくても文字サイズを自動調整しちゃうんですねー。

最近は自分で使うリセット用CSSの中に-webkit-text-size-adjust: 100%;を入れるようにしていたので、自分で一から作る場合は大丈夫だったんですが、フリーのWordPressテンプレートを使う場合などはこの指定が入っていなかったりするので注意せねばです。

以下のページに詳しい説明がありますが、-webkit-text-size-adjustでnoneを指定しちゃうとデスクトップ版のChromeやSafariなどで文字サイズの拡大ができなくなったりするようなので注意。

-webkit-text-size-adjust: none を絶対に設定してはいけない理由 – てっく煮ブログ

これはWebKitのバグらしいですが、ひとまずはnoneではなく100%を指定しておくのが良さそう。

ちなみにNormalize.cssでは、きちんと以下のようなコメントが入っていました。ユーザが文字サイズ拡大してるのを無効にしないように、100%を指定しているということですねー。えらい。

【参考】Normalize.css: Make browsers render all elements more consistently.

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

現状では大手サイトでも-webkit-text-size-adjust: none;を指定していることが多く、Chromeで文字サイズの拡大が効かなくて困るんだよねーって方に、こんなのもあったのでついでにリンクはっておきます。

【参考】Chrome Web Store – Webkit-Text-Size-Adjust Remover