iPhoneで入力時に起こるズームを無くす方法、CSSに書き足すだけ

iPhoneでブラウジングをしていると、何か入力するときにズーム(フォーカス)する現象に出くわした事ある人多いと思う。何か入力するときに、キーボードが表示されると同時にニュっとなるやつ。

この入力時にフォーカスする機能は、Appleが小さい文字でも見やすいようにという余計な気遣いから設定しているようだ。

ウェブサイトを作っている人でInput Fieldがフォーカスする機能についてウザいと感じている場合、排除してあげよう。あなただけではない。

このズーム機能は、文字の大きさが16px以上だと遭遇しないので、CSSを使い強制的にInput Typeを16pxにしてあげるだけで解決する。

以下のコードをCSSに記載しよう。


input[type=text],input[type=password], input[type=email]{
   font-size: 16px;
}

WordPressだと、↓に記入してあげればOKだ。

Default image
Keisuke Kuribara
零細企業の代表 / ウェブマーケティング、コンサルティング、EC / 漫画と本が好き / 生物捕獲が趣味