CSS Tips #1 レスポンシブデザイン（iPhone iOS周り）のフォント表示 ちょっとしたTIPS

iOSで入力フォームがズームされるのを防ぐ方法

iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。（viewport指定でuser-scalable=noにしていなければ） そのため、無駄に画面を拡大してしまい、意図せず画面の水平方向のスクロールが発生してしまうことがあります。 この自動調整を防ぐには、以下のようにフォントサイズを16px以上に設定します。

input[type=text] {
  font-size: 16px ;
}

iPhoneやiPadなどiOSでは、入力フォームのフォントサイズが16px未満だと入力時に文字を大きく見せようと入力欄自体を自動調整する仕様のようで、そのためビューポート(ズーム値)のズームが発生する様です。 どうしても、デザイン上フォントサイズを小さくしたい場合は、transform、scale などのプロパティを使うしかないのですが、その場合inputフォーム自体のサイズ（width や height）なども縮小されてしまいます。

input[type=text]{
  font-size: 16px;
  scale: 80%;
}

inputフォーム自体のサイズが意図せず縮小される点をリセットしたい場合、追いかけっこみたいですが、追加の調整が必要です。例えば、以下。あくまで一例です。

input[type=text]{
  font-size: 16px;
  scale: 80%;
  translate: -10% -10%;
  box-sizing: border-box;
  width: 125% !important;
  height: 50px;
  padding: 5px;
}

上記の設定は、結果（見え方）として、以下と同じです。

input[type=text]{
  font-size: 12.8px;
  box-sizing: border-box;
  width: 100% !important;
  height: 40px;
  padding: 5px;
}

スマホ画面で、勝手に自動調整されて文字サイズが大きくなるのを防ぐ方法

iPhoneやAndoroidを横使いにしたときに、勝手に自動調整されて文字サイズが大きくなることがあります。 以下でリセットできます。

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

「-webkit-text-size-adjust」は、デフォルトで「auto（自動調整）」に設定されています。 ゆえに、100%とすることで、CSSで指定しているフォントサイズに対して100％で表示され、勝手なサイズ調整がなくなります。