けっこう前のことだが、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端末での入力時に画面が勝手にズームインする問題を解決できます。
なお、この設定ではピンチインによるズームは引き続き可能です。
以上です!