スマホサイト制作時の困った！iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。
メディアクエリを使ってコーディングをしていたのですが、iPhoneで見ると一部のフォントサイズが拡大されてしまう現象に遭遇。（SafariもChromeも）
しかも、画面が縦位置の時は何ともないのに、横位置で見たときだけ。
CSSをどういじってもダメで半べそになりながらも無事に解決したので、よろこびのエントリー。
目次
- CSSにコードを追加で解決！
- なぜ-webkit-text-size-adjust: 100%;なのか？
- 実機確認て、やっぱり大事
- 可読性かデザイン性か…
Advertising
CSSにコードを追加で解決！
はじめに結果だけ書いてしまうと、CSSに
body {
-webkit-text-size-adjust: 100%;
}と記述することで解決しました。
なぜ-webkit-text-size-adjust: 100%;なのか？
-webkit-text-size-adjustは文字通り、テキストのサイズを調整することを制御するプロパティということで、デフォルトの値がautoのため、自動で調整されてしまうということみたいです。（参考：てっく煮ブログ）
指定できる値として、
- auto
- none
- <パーセント>
があり、サクっとnoneで自動調整を無効にしたいところですが、-webkit-text-size-adjust: none;ではPCでの閲覧時の拡大・縮小に問題が発生するバグがあるとのことなので、100%と指定をした方がよいのだそうです。
実機確認て、やっぱり大事
PCでプレビューしている時にはおこらなかった現象なので、最終に近い段階での確認で発覚したことで精神的なダメージが大きかったです。参った！
Mac使ってるなら、iOSのデバッグツールを使いなさいよって話かもしれません…
iPhoneのブラウザと、Androidの一部のブラウザでも同様の現象が起こるらしいのですが、私が確認した限りではAndroidでフォントサイズの自動調整はされていませんでした。
可読性かデザイン性か…
自動調整でフォント拡大表示された方が１行の文字数が多すぎなくて読みやすいということもあるので、その機能を切ってしまうのはデザイナーのエゴなのかなぁと思わなくもないのです。
でも、全体のバランスを見ると、「この一部分だけ急に文字が大きくて明らかにおかしい！」という印象をもたれてしまうのも良くない…困った。
このエントリーを書くきっかけになった案件では、自動調整をオフにして対応しましたが、他の案件ではその都度検討すべきこととして頭に入れておきたいと思います。
