iPhoneやiPadでフォームを入力するためにフォーカスすると、画面が自動でズームされることがあります。これはiOSの仕様で、inputやtextareaのフォントサイズが15px以下だと画面がズームします。
少なくともWeb制作の現場では、この挙動は結構嫌われていて、「フォーム入力時に画面がズームしないように」と仕様に明記されていることも多いです。
inputやtextareaにフォーカスした際に、画面が自動でズームしないように対策するわけですが、今回はその方法を2パターンご紹介したいと思います。
フォントサイズを16px以上に指定する
1つ目の対策はとてもシンプルです。inputやtextareaのフォントサイズが15px以下だとズームされるわけですから、16px以上に指定してあげればズームされません。
selectもズームされる対象なので、CSSで以下のように指定します。
input,
select,
textarea {
font-size: 16px;
}meta viewportにmaximum-scale=1.0を追加する
2つ目の対策は、meta viewportで行う方法です。meta viewportの値に「maximum-scale=1.0」を追加すると、inputやtextareaのフォントサイズが15px以下でもズームされなくなります。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">フォームにフォーカスしても画面がズームされなくなるのは良いですが、「maximum-scale=1.0」を追加すると、ピンチアウト/ピンチインが効かなくなるんじゃ？という疑問が湧きますよね。
検証してみたところ、「maximum-scale=1.0」を追加しても、iPhoneではピンチアウト/ピンチインによる画面の拡大/縮小は機能しました。ただ、Android(バージョン11)では、ピンチアウト/ピンチインが効かなくなりました。
meta viewportで対策する際は、この辺りも考慮して検討する必要がありますね。
あとがき
私個人の観測範囲にはなりますが、フォントサイズを16px以上にして対策するのが100%で、meta viewportで対策したことはありません。
どうしてもデザインの都合上フォントサイズを大きくできない場合は、meta viewportで対策することになりますが、Androidでピンチイン/ピンチアウトが効かなくなるので注意が必要です。