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

Photo by Youssef Sarhan on Unsplash

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

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

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

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

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


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

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

You May Also Like
シンタックスハイライト
続きを読む

【3行のコードだけ】手軽にシンタックスハイライトを導入できる「highlight.js」の使い方

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う(プログラムの事を書く人)。 そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。…