iPhone、iPod touchなどでフォントサイズが変わる対応方法

最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。
そんなスマホ対応していて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%;

と設定するのがいいようです。
以下のサイトに詳しく書いてあるのでご参考までに

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

「iPhone、iPod touchなどでフォントサイズが変わる対応方法」への11件のフィードバック

  1. 4sでの表示で同様の壁にぶち当たってしまい困っていましたが上記の方法で無事解決いたしました!
    Android環境でも確認しましたが特に問題はございませんでした。
    ありがとうございました!

    1. お役に立ったようで何よりです!この手の不具合は一度ハマると厄介ですよね(苦笑
      Android環境のご報告もありがとうございます!!

  2. 4sでまったく同じ状況に陥っていたのですがこちらのエントリーで解決しました!
    タグでもcssでも一向に直らず途方にくれていたので感謝してもしきれません。
    ありがとうございました!

    1. そこまで感謝されると逆に恐縮してしまいます(笑
      無事解決されたようで何よりです!!

  3. IE6とIE7のcssをいじってたら、iPhoneも表示が違って困っていました。
    たまたまこのブログを見つけて解決しました。
    ありがとうございます!

    1. お役に立ったようでよかったです!
      地味ながらこの問題結構イタイですよね(笑

  4. がっちりハマって調べていてここにたどり着きました。
    とてもとても助かりました!!!
    ありがとうございました!!!

    1. 解消されたようでよかったです!
      ハマる人多いようなのでもうこの機能デフォルトオフでいいんじゃないかと(笑

noji3 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。