最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。
そんなスマホ対応していてiPhone（正確にはiPod touch）で確認してみたら特定のエリアだけ文字サイズが妙に大きくなっている現象があり、ちょっと（実際にはかなり）ハマったので備忘録的メモ。
メディアクエリを使ってウィンドウサイズによってスタイルシートを分けてるんですが、PC環境とiPhoneを縦で見ると問題ないのに何故か横にした時だけフォントが大きくなるという現象が発生。
cssを色々書き換えてもどうしても直らずレイアウトから変えなきゃいかんのか…と悩んでいたら、どうやらiPhoneでは自動でフォントサイズを調整してくれる機能があるらしいです。で、それを解除するにはCSSのbodyにでも以下を加えるだけ。
-webkit-text-size-adjust: none;
これで無事解決。
でもAndroid環境がないのでAndroidだとどうなってるかが気になります。
2013/2/20 追記 ——————————————–
noneに設定してしまうと文字サイズの変更ができなくなり、ユーザビリティが下がるため
-webkit-text-size-adjust: 100%;
と設定するのがいいようです。
以下のサイトに詳しく書いてあるのでご参考までに
yumi へ返信する コメントをキャンセル