Web関連あれこれ

web制作に関連する情報(jQuery html css バグ対策 便利ツール など)を発信します。

iPhone版Safariでフォントサイズがおかしくなる問題

PC版は全く問題ないのに。。iPhoneで表示確認するとちゃんと、
文字サイズ指定したのに、大きくなったり小さくなったり。。
文字サイズにバラつきが出る問題。。

解決方法

結論から言うと↓で直ります。

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

どうやら、iPhone文字サイズ自動調節機能が効いてしまっているようです。
自動調整を行わないようにする指定が↑こちらになります。


ちなみに、

  • webkit-text-size-adjust: none;

だと文字の拡大ができなくなるのでNGです。
WebKitのバグのようです。。


リセットcssに入れておくといいですね。

▼リセットcss最新版 テンプレ
http://d.hatena.ne.jp/soratomo0714/20120814/p2



【関連記事】
Chromeでfont-sizeにremを使った時に、フォントサイズが大きくなる問題
http://d.hatena.ne.jp/soratomo0714/20150706