iPhone実機で、テキスト入力フィールドで画面がフォーカス（拡大）されるのを禁止する方法

けっこう前のことだが、iPhoneで、テキスト入力フィールド（inputフィールド）をタップした際に、画面が自動的にズームインしてしまう問題。Webサイト上で、これをどうしたらズームしないようにできるか対処する方法がわからず悩んだ。

なんでこんなことに！？

この問題は気の利くiOSデバイスが、文字が小さい場合でも入力時の視認性を向上させるために、自動的にズームインする仕様によるものなんですって！

さらに、ズームしたあと文字入力終わってもそのままズームしたままで、自分でピンチアウトしないと画面が戻らない仕様。これは10人いたら9人はストレスになるんじゃないだろうか。

OS由来のクセある挙動は潰せないこともあるから大変。。というわけで、ハック的な解決策をご紹介します。

対処法は2つあります

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

iOSでは、font-sizeの値を16px以上に設定すれば、ズームインが回避されます。

②viewportを設定する

以下のmetaタグをHTMLのheadセクションに追加すると、入力フィールドにフォーカスしてもズームインが防止されます。

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

この設定により、iOS端末での入力時に画面が勝手にズームインする問題を解決できます。

なお、この設定ではピンチインによるズームは引き続き可能です。

以上です！