iphoneでinput要素にfocus時に拡大してしまう問題
iphoneで名前や住所を入力する画面はよくあると思います。
ただiphoneの仕様で入力要素のfocus時に勝手に拡大されてしまう、ありがた迷惑な機能があります。
入力してfocusが外れても拡大されたままなので、とてもめんどくさい状態のままになってしまいます。
viewport
のズーム許可を設定するuser-scalable
をno
に設定して回避する事も可能ですが、ピンチイン・アウトで操作ができなくなってしまうのでユーザビリティ的によくありません。
解決策としては、input要素に設定されているfont-size
が16px
以上であれば拡大されなくなります。
補足
デザイン的に16px
は大きすぎるという場合にはtransform: scale()
を使って無理やり縮小させるという方法があります。