1. TOP
  2. HTML / CSS
  3. 【UX改善】iOSでフォーム入力時に拡大するのを防ごう
詳しくはこちら
HTML / CSS
 | 

【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-size15px以下だからです。

なので、入力するフォーム(input)のfont-size16px以上にしてあげれば、入力中に画面が拡大する減少は防げます。

どうしてもフォームのfont-sizeを小さくしたい場合…

デザインの都合上、16pxだと大きすぎる!という場合は、transform: scale()を使ってテキストを小さくするという方法があります。

この注意点としては、transform: scale()を適用する要素をどれにするか(input自体に適用させるか、その中のspanに適用させるかなど)をしっかりと決めないと見た目が崩れる可能性があります。

まとめ

細かい心遣いでWebサイトは使いやすくも使いにくくもなります。

少なくとも、テキストサイズが16pxだと大きいから小さくしようのような安直な理由でユーザー体験を低下させるのは絶対に避けましょう。

 

関連記事