iOSでフォーム入力時に画面の自動拡大を防ぐ方法

2024年9月15日2024年9月21日

iOS端末では、フォーム内のフォントサイズが16px未満だと、入力時に画面が自動的に拡大する仕様になっています。

今回は自動拡大を防ぐための解決方法を記しておきます。

解決方法①：font-sizeを16px以上に指定する

単純にfont-sizeを16px以上に指定すれば自動拡大されることはありません。

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

metaタグのviewportにmaximum-scale=1.0を指定することで、自動拡大を防ぐことができます。

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

ただし、3より小さい値を指定することはアクセリビリティ違反にはなります。

ページで許可される拡大率を制御します。 3 より小さい値を設定するとアクセシビリティに違反します。最小値は 0.1 です。最大値は 10 です。既定値は 10 です。負の値は無視されます。
MDN Web Docs

自動拡大を防ぐには、font-sizeを16px以上に指定する方法が最適解です。

上記以外の方法で、16px未満にできたとしても、そもそも小さな文字で入力させることがアクセシビリティ違反なはずです。

無視してでもfont-sizeを小さくしたい場合は、viewportにmaximum-scale=1.0を指定すれば実現は可能です。