

【UX改善】iOSでフォーム入力時に拡大するのを防ごう

iOSでフォームを入力する時に、画面が拡大することがありませんか?
入力中は拡大されてもあまり気にならないと思います。
しかし、入力が終わっても画面は拡大されたままになっています。
なので、最終的に自分で拡大されている状態を戻さなければいけません。
(指2本でピンチインして戻します)
ピンチインとは、iPod touchやiPhone、iPadなどにおけるマルチタッチスクリーン操作の呼び名のうち、2本の指で画面上の操作対象をつまむように動かし、画面を縮小させる操作のことである。
参考URL:https://www.weblio.jp/content/%E3%83%94%E3%83%B3%E3%83%81%E3%82%A4%E3%83%B3
これだと使い勝手が悪いので、iOSでフォームを入力する時に画面が拡大されないようにしましょう。
拡大する原因と対策
拡大する原因はとてもシンプルで、入力するフォーム(input)のfont-sizeが15px以下だからです。
なので、入力するフォーム(input)のfont-sizeを16px以上にしてあげれば、入力中に画面が拡大する減少は防げます。
どうしてもフォームのfont-sizeを小さくしたい場合…
デザインの都合上、16pxだと大きすぎる!という場合は、transform: scale()を使ってテキストを小さくするという方法があります。
この注意点としては、transform: scale()を適用する要素をどれにするか(input自体に適用させるか、その中のspanに適用させるかなど)をしっかりと決めないと見た目が崩れる可能性があります。
まとめ
細かい心遣いでWebサイトは使いやすくも使いにくくもなります。
少なくとも、テキストサイズが16pxだと大きいから小さくしようのような安直な理由でユーザー体験を低下させるのは絶対に避けましょう。