Designed item on Suzuri 👔

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

ウェブ
Photo by Youssef Sarhan on Unsplash
この記事は約1分で読めます。

*引用シェア歓迎です。リンクを記載し自由にご使用ください

クリブログ

 

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

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

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

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

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


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

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

コメント