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

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

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

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

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

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

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

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

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

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