コーディング
schedule2012.8.1

iPhoneでサイトのレイアウトが崩れたとき,まず疑うべきCSS

CSS

iPhoneは自動でフォントサイズを変更してくれます。しかしこれが原因でレイアウトが崩れてしまうことも。
リキッドレイアウトであれば便利なところもありますが、たいていの場合はお節介な機能かもしれません。この自動フォントサイズ変更を解除することができます。CSSに一文記述するだけです。

『-webkit-text-size-adjust』をCSSに記述

CSSの任意の場所へ-webkit-text-size-adjust: ('none' '100%' 'auto');を記述します。

値
  • none（解除）
  • %（数値）
  • auto（自動/初期値）

全体の自動変更を解除したい場合はbodyへ指定しましょう。
なお、none指定にするとブラウザの拡大表示ができなくなります。100%に指定しましょう。

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

以上です。
パンくずなどのシビアな文字サイズでデザインしている箇所が崩れている場合に指定してみてはいかがでしょう。

最新記事一覧

もっと見る