【スマホ】iPhoneでフォームの入力欄が自動拡大するのを防ぐ方法

レスポンシブサイトやスマートフォンサイトのメールフォームを作成した際に、入力欄に入力しようとすると画面が拡大されることがあります。こちらを回避する方法をメモしておきます。

入力欄の「font-size」を16px以上にする

スタイルシートで、font-size:16px;を指定するだけで拡大を回避できます。

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

font-size:16px;以下だと、iPhoneの方が画面が小さいなーと思って拡大してくれるみたいですね。
使い勝手が良いのか微妙なところです。
フォントサイズや入力欄を大きくして、画面が拡大されない方が使い勝手が良いかと思いますので、制作の際はそのように設定しています。

こちらで詳しく紹介してくださっています。

情報をありがとうございます！