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

おかぴーです。

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

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

 

みみこみみこ
わたしもたまに見かけます!
ちょっとめんどくさくなって、入力をやめてしまうこともあります(笑)
おかぴーおかぴー
そうなんですよね。
同じページのフォームでもパソコンなら問題なかったりするのですが、ユーザビリティを改善するって意味でもチェックしてみてください。

 

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

 

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

結論から言うと、

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

 

スマホスマホ
あ、この文字小さいわ!
見やすくなるようにズームにしてあげるね!

 

と、スマホ側の設定で大きくする仕様があるようです。
なので、フォームで入力する文字サイズをCSSで指定してあげると解決するかと思います。

 

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

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

まずはPCの場合です。

 

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

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

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

 

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

chrome開発ツール 切り替えボタン

 

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

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

chrome開発ツール
chrome開発ツール

 

 

次にスマホの場合。

 

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

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

chrome開発ツール 切り替えボタン

 

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

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

chrome開発ツール
chrome開発ツール

 

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

↓のコードは、contact form 7のプラグインで使えるコードです。
 CSSコード(input欄)
.wpcf7-form-control-wrap input{
font-size:16px;
}
inputの入力欄以外にも対応したい場合も対応できます。
入力欄が多い「textarea」の場合です↓
 CSSコード(textarea欄)
.wpcf7-form-control-wrap textarea{
font-size:16px;
}
プラグイン以外でも、CSSの指定をしてあげれば対応できると思いますので、試してみてください^^

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG