iOS端末でのフォームの拡大表示に対応する

iOS端末ではフォームの入力要素のフォントサイズが16px未満だと、入力要素にフォーカスした時に自動で拡大する仕様があります。
自動拡大が発生すると、ユーザーに対して拡大された状態を戻す操作を強いてしまうため、ユーザービリティを考慮するとできる限り避けたいです。

対応策

フォントサイズを16px以上にする

入力要素のフォントサイズを 16px 以上にすることで、ブラウザが自動拡大するのを防ぐことができます。

input, textarea, select {
  font-size: 16px;
}

viewport を設定する

デザインを考えると入力要素のフォントサイズを 16px 未満にしたい状況は往々にして存在します。
また、入力要素のフォントサイズを rem などの相対値で指定していた場合に基準値を変更して予期せずフォントサイズが 16px 未満になる危険性もあるため、フォントサイズを 16px 以上に設定するのは良い解決策とは思えません。

そこで、別のアプローチとして viewport の maximum-scale=1 を設定する方法があります。
maximum-scale の初期値は 1.6 に設定されているため、この値を 1.0 に変更することで、ブラウザの自動拡大が発生しても最大倍率が1倍となるため、拡大表示を防ぐことができます。

<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0" />

どちらを使うべきか？

フォントサイズを 16px 以上に設定する対応は暗黙的な仕様となり得るので避けたいです。
また、個人的に入力要素のフォントサイズを 16px にするのは、サイズ的に大きいと感じるのとデザインに制約が発生するので、基本は viewport を設定する方針がベストの対応かなと思います。