iOS Safariでinputタグにフォーカスを合わせると、自動で画面が拡大してしまう原因と解決方法

iOS Safariでウェブサイト内のテキストフィールドをタップしてフォーカスを合わせたとき、画面が少し拡大されてしまうことがあります。
入力したあとはで縮小しないと、ずっと拡大されたままなので正直面倒です。

フォームのフォントサイズが16px未満だと拡大される

これはiOS Safariの仕様で、<input>タグのフォントサイズが16px未満のときに、そのタグにフォーカスされると自動で拡大されてしまいます。

See the Pen iOS｜<input> font-size by Masakazu Saito (@31mskz10) on CodePen.

zoomプロパティでフォントサイズは16pxにしながら縮小して小さく表示させる

かなり邪道な方法ですが、「どうしてもこのフォームのフォントサイズは小さくしないといけないけど、拡大はさせたくない」という場合に、フォントサイズは16pxにしておきながら、zoomを使って小さくする方法があります。

input {
  font-size: 16px; // フォントサイズは16pxにして拡大しないようにする
  zoom: 0.75; // 倍率を指定して表示を小さくする
}

見た目上は小さく表示されていますが、実際のフォントサイズは16pxなので、フォーカスしても拡大されません。
しかしこの方法は、レイアウトがかなり面倒になりますし、思わぬ表示崩れを生む可能性があります。

「そこまでする意味があるの？」を考えないと、ただただ時間がかかるだけの実装になってしまいます。

デザインから知っておく必要がある

ウェブサイトを実装したりデザインするときに、なぜこうなるのか知っておかないと、ユーザーに余計なストレスを与えてしまうことになります。
今回の問題は実装観点の話ですが、デザイナーも知っておかないと深く考えずに15pxの指定をしてしまいそうです。

inputの中の文字は普通にデザインしていると通常文字より小さくなってしまう場合がありますが、本当に16px未満にするべきなのかどうか考えてデザインする必要がありそうです。