chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

iphoneでinput要素にfocus時に拡大してしまう問題

iphoneで名前や住所を入力する画面はよくあると思います。

ただiphoneの仕様で入力要素のfocus時に勝手に拡大されてしまう、ありがた迷惑な機能があります。

入力してfocusが外れても拡大されたままなので、とてもめんどくさい状態のままになってしまいます。

viewportのズーム許可を設定するuser-scalablenoに設定して回避する事も可能ですが、ピンチイン・アウトで操作ができなくなってしまうのでユーザビリティ的によくありません。

解決策としては、input要素に設定されているfont-size16px以上であれば拡大されなくなります。

補足

デザイン的に16pxは大きすぎるという場合にはtransform: scale()を使って無理やり縮小させるという方法があります。