iPhoneやiPadなど、iOSデバイスで入力フィールドをクリックした時に、ウィンドウが自動でズームされる挙動を防ぐ方法紹介します。

解決方法は２つ。

  1. ミニマムのフォントサイズを16px以上にする
  2. viewportにmaximum-scaleを指定

それぞれの詳しい解説は以下。

font-sizeを16px以上に指定する

フォームのinput、textarea、select要素にfont-size:16px;またはそれ以上の値を指定すれば自動拡大されません。

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

逆にフォントサイズが16px未満だとズーム表示されるようになります。

viewportにmaximum-scaleを指定

もうひとつの解決策は、メタタグのviewportで「maximum-scale=1.0」を指定する方法です。

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

しかし実は、maximum-scaleは「3」より小さい値を指定とアクセリビリティ違反になります。

まとめ

以上、2つの方法で自動拡大を防ぐことができますが、maximum-scaleでの処理はアクセリビリティ違反になってしまうので、現実的には「font-size: 16px;」にする一択になるかと思います。

ぜひお試しください。