スマホでフォームに文字入力しようとすると画面がズームになる時の解決方法

おかぴーです。

ブログやWEBページにフォームを設置して、実際に「スマホ」で文字を入力しようとした時に画面がズームになってしまうことはありませんか？↓

（僕のお問い合わせフォームを例にしています。ただ、もっと画面幅を超えてズームになってしまう場合もあるかと）

 

 

今回はフォームを作る側の立場で、画面がズームになってしまう時の解決方法です。

 

フォントサイズが小さいことが原因

結論から言うと、

スマホの文字サイズが16pxよりも小さい場合に、

 

 

 

Chromeの開発ツールを使ったフォントサイズの確認方法

当ブログのお問い合わせフォーム（contact form 7のプラグイン）を例に、パソコン・スマホそれぞれのフォントサイズを確認していきます。

まずはPCの場合です。

 

①Chromeの開発ツールを表示します。

Macの場合「command+option+i」を押すと、Chromeの開発ツールが表示されます。

windowsの場合は、「Ctrl+shift+i」です。

 

②↓の赤枠をクリックすると、ページ内のコーディング情報が確認できます。

 

③右下に表示される「計算済み」を選び、その中からfont-sizeを見つけましょう。

パソコンでは、16pxでした。

 

 

次にスマホの場合。

 

①↓の赤枠をクリックすると、デバイスのサイズを変更することができます。

今回は、iPhoneSEのサイズで確認してみました。

 

②同様に「計算済み」からfont-sizeをチェック。

すると、スマホの場合は14pxであることが分かりました。

 

ということで、スマホの場合に文字サイズを16pxになるように変えてあげると解決します。