レスポンシブデザインでサイトを構築する事もすっかり多くなっている今日この頃です。
構築したサイトをiPhoneで見てみると…
「あれ、ここだけフォントサイズ大きくない？」
といった事がちょくちょくあります。
調べてみると、どうもiPhoneのブラウザ「Safari」の場合は、自動でフォントサイズを調整する「-webkit-text-size-adjust」というCSSが作用しているようです。
一部のブラウザでは、このCSSによって、画面サイズによってフォントサイズが自動で調整されているようです。
その影響で、iPhone等で見てみると、一部のフォントが大きくなっていたりするみたいですね。
対処法そのものは至って簡単なので、単刀直入に対象をこちらに…
html {
-webkit-text-size-adjust: 100%;
}
これだけです。
「-webkit-text-size-adjust」の作用によって、あっちではフォントサイズ固定、こっちでは画面サイズに合わせて自動調整…といった挙動のばらつきを統一してあげます。
ちなみに、noneを指定してあげれば、自動調整をOFFにできるのですが、それをすると別の問題があるそうです。
参照元のページでの解説によりますと、
noneを指定（OFFにする）してしまうと、小さい文字が見にくい人が、ブラウザにある拡縮機能を使って画面を拡大しようとしても、文字サイズだけ拡大してくれなくなってしまうようです。
ページを拡大表示したい方にとっては、それは不便ですね。
個性も大事ですが、多少は足並みも揃えてあげましょうね（という話ではないですけど）
【参照させて頂いたサイト】
https://wayohoo.com/programming/css/ios-safari-is-always-webkit-text-size-adjust-on.html
こちらには、「-webkit-text-size-adjust」に関する詳しい解説も載っています
http://tech.nitoyon.com/ja/blog/2013/02/14/text-size-adjust/