iPhoneでサイト内検索やコメントフォームをフォーカスすると、画面が拡大されてしまいます。
これってサイトを再度閲覧する際に、画面をピンチアウトして戻さなければいけないのでちょっと面倒くさいと思ったことはありませんか？
このiPhoneの仕様、ちょっと気になったのでこれを修正する方法についてお書きします。
iPhoneでフォームにフォーカスすると画面が拡大する原因は？
実はこれ、iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからです。
フォームに入力される文字が16px未満になっていますと、iOSのユーザーエージェントを基準にiPhoneが勝手に拡大しているのです。
つまり、フォームに入力されるfont-sizeを16px以上にすればフォーカス時に画面が拡大されることはないです。
解決方法は、CSSに下記コードを追加するだけ、となります。
input{ font-size:16px; } /*フォームのフォーカスOFF*/
ちなみにheadセクションに下記のメタタグを入力すれば、ピンチイン・ピンチアウトを無効にできるみたいです。
ただし都合によって画面拡大したい場合もあると思うので、あまりお勧めはしません。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
TCDテーマの場合
TCDテーマでももちろん可能です。
サイト内検索とコメントフォームの記述を分けて書きますと
#google_search-2 input{ font-size:16px; } /*Googleカスタム検索のフォーカス無効*/
#comment_textarea textarea , #comment_textarea input{ font-size:16px; } /*コメントフォームのフォーカス無効*/
上記コードを 外観＞テーマオプション で追記してください。
以上、スマホサイトでフォームの入力時に画面拡大をOFFにする方法でした。TCDのテーマ選びに迷っている方はテーマ比較ナビがおすすめ→テーマ比較ナビ
