コンタクトフォームを作成して、スマホの実機でテストをしているときに気づきます。

inputタグがactiveになると画面からはみ出してる！！！と。

入力しようと入力欄をタップした瞬間にびよぉぉ～～んと画面の端を突き抜けていく。

iOSの親切心

それはiOSが良かれと思ってやってくれていること。

iOSの自動ズーム機能です。

iOSのWebブラウザ（Safari）の仕様で、特定の条件（フォントサイズが16px未満）を満たすと、表示が自動的にズームされます。

ほぅ。親切やないかぃ。

しかし、こちらとしてははみ出してほしくないのが本音。

iOSの心遣いのことを知らないお客様から「はみ出してるよ！！」と怒られる未来が見える・・・

iOSに寄せる解決策

フォントサイズが16px未満で自動的に拡大されてしまうので、フォントサイズを16px以上に設定する。

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  font-size: 16px;
}

こうすれば自動でズームされる心配はない。

metaタグを使った解決策

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

metaタグに maximum-scale=1.0 を設定することにより16px以下の場合でも自動ズームされるのを防げます。

自動ズームを防ぐだけでユーザー自身がピンチしてズームすることは可能なのでこれで対応するのもアリ。

スマホで16pxが見やすいサイズなのかどうかは置いておいて・・・

ついつい自動に頼りがちだけど、なんでも自動がいいってもんでもないんだな。