iPhoneのみで、何故か表示やレイアウトが崩れてしまう問題点を解決する件

サイトを作成中に、嵌ってしまったので一応メモをと…。

普通にサイトを作っていたのですが、何故かiPhoneで確認すると意図する表示とは異なる結果が表示されている。

「なんでだろう？」

主要ブラウザで何個も確認！

Google Chromeをはじめ、FF、IE、Safari、Opera…。

それ以外にもスマホからも確認するも、何故かiPhoneだけでおかしい。

また、PCからiPhone用のシュミレータを幾つも確認するも、ここでは表示はOK。

どうやら、実機のみで起こる現象のようだ！

で、よくよく崩れる原因を見てみると、どうもフォントサイズが微妙に指定したものと異なっている感じだ。

フォントサイズが異なる為、色々な部分で勝手な改行が起こったり、画像やコンテンツを圧迫し、ずれが生じている模様。

そんでもって、この現象を調べてみると、どうやらiPhoneには自動でフォントを調整する迷惑な機能が備わっているとの事！

原因が分ってしまえば簡単！

この自動調整機能を、強制的にOFFしてやればOKです。

具体的にはCSSの以下の記述を追加します。

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

これでようやく、iPhoneでも意図する表示にする事が出来ました！

何ともお節介機能で時間を費やしてしまいました！ｗ

【国内版ＳＩＭフリー】　iPhone 6 16GB　ゴールド　白ロム　Apple　4.7インチ メーカー：アップル