スマホの入力フォームが勝手にズームしちゃう？

こんにちは、システム事業部の王です。前回はセレクトボックスのスマホ対応について紹介させていただきました。

(リンクはこちら：スマホセレクトボックスの脱デフォルトスタイル)

今回も引き続き、お問い合わせなどによく使われる入力フォームのスマホ対応に関する悩みの一つをあげたいと思います。

iOSでは入力フォームにフォーカスすると画面が勝手に拡大(ズーム)
されるのはなぜ？

上記画像のように、項目を入力しようと枠をタッチしたら、画面が勝手に拡大される現象が起こりました。

文字を見やすくしてくれるのはありがたいですが、項目の入力後、他の項目に移る時に、いちいち正常サイズの画面に戻すのは少々面倒です。

UX的にも決して良いとは言えません。

原因はiOSのフォーム仕様にあります

iOSでは、入力フォームのfont-sizeデフォルト値が16pxと設定されてるようです。
それより小さいfont-sizeに指定すると、「あっ文字を大きく見せなきゃ！」となり、勝手に調整してくれる仕様となっています。

仕様が理解できれば対策もできるはずです。

はい、これだけです↓

CSS

一度コードを追加してiPhoneで確認してみましょう。

これでオッケーです。

お持ちのテストデバイスがAndroidのみの方は是非font-sizeの指定を確認してみてください。

私は最近フォーム制作を含む案件が多くなり、少しずつ「こうなったら便利かな、使いやすいかな」と思う工夫が表現できるようになってきました。またこの場を借りて皆様とシェアしたいと思います。
最後まで読んで頂きありがとうございました！