iOS（Safari）でサイトのフォーム（input要素）に自動でズーム（フォーカス）される動作と、自動的にズームさせなくする方法についてです。
原因を調べたところ、現在のiOSは各フォームのフォントサイズが小さい場合に画面を自動的にズームするようになっているとのことです。
当サイトではフォーム選択時にズームしてほしくなかったので、対処しました。
iOSはフォームのフォントサイズが16px未満の場合にズームするようです。
この記事の目次
iOSで入力フォームにズームされる問題
以前、PageSpeed Insightsでヘッダーに「user-scalable=no」を使っていて、ズームできないじゃないか！と怒られたのですが、これを解決したら問題が発生しました。
iOSでサイト内検索やコメント欄などの入力フォームを選択した時に、フォーム部分に画面がズームされてしまうのです...。その時の様子をGIFにしたのがコチラです。
iOSでフォームに自動ズームされる様子（GIF）
パソコンから確認していると分からなかったのですが、iPhoneの実機だとフォームの選択時にフォーム部分に寄るように画面がズームします。これが地味に困るのです。
フォーカスとも言うあの感じですが、１度ズームされたらピンチイン（→←）しないと元の画面サイズに戻ってくれないのです...。
当サイトの場合はココにズームされると、メニューの「閉じる」ボタンが凄く押しにくくなり、ユーザビリティが悪化するので対処することにしました。
フォームにズームするのはiOSの仕様
フォームにズームされる原因はiOSの仕様で、フォームのフォントサイズが16px未満の場合にiOSの方で自動的にズームするようになっているみたいです。
フォントサイズが一定のサイズよりも小さい時には、ユーザビリティの向上のために自動的にズームするというのが現在の仕様らしいです。
その証拠にブラウザがSafariであっても、Chromeであっても各入力フォームにズームするという動作に変わりはありませんでした。OSレベルの制御のようです。
早速当サイトもフォントサイズを確認すると、フォーム内は14pxという指定でした。
これがiOSでズームされてしまう直接の原因です。
フォントサイズが16px未満のフォームはiOSでズームされる
フォーム内のフォントサイズが何pxなのかは、Chromeのデベロッパーツールなどを使って確認するとすぐに分かるので確認してみて下さい！
原因がハッキリしたところで対処方法に参りましょう・ｗ・
iOSでフォーム要素にズームさせなくする方法
iOSでフォームに自動ズームする原因は、フォーム部分のフォントサイズが16px未満であるという単純な話ですが、対処する方法は複数あります。
具体的には以下のような方法です。
- フォントサイズを16px以上にする（推奨）
- フォントサイズを指定しない、またはmediumで設定する
- viewportのメタタグで「user-scalable=no」を設定する（非推奨）
基本的にはフォントサイズを16px以上に設定しないとズームされてしまいます。
２の方法についてですが、CSSを使って対象のフォーム部分のフォントサイズを指定していない場合、スマホの標準フォントサイズは16pxになるのでOKということです。
CSSのfont-size: medium;を使っても同様に16pxになります。
３の方法はサイトヘッダーなどのviewportのメタタグで「user-scalable=no」を設定するという方法ですが、ユーザーに画面のズームを許可しないという設定になるので非推奨です。これは冒頭でも触れた通りPageSpeed Insightsでも怒られる内容です。
簡単ですが、それぞれの対処法を見ていきましょう。
CSSでフォントサイズを16px以上にする
該当する全てのフォーム要素フォントサイズを16pxにすればOKです。
input[type="text"] {
font-size: 16px;
}メディアクエリ「@media(min-width:480px){}」等を使ってPC・スマホでCSSを切り替えたり、疑似クラスの「:not」を使って他のフォーム要素を除外する記述も必要になると思いますが、ブラウザの開発者ツールを使って臨機応変に対応しましょう。
また、CSSのtransform: scaleを使ってズームしないように16pxに設定しつつ見た目は少し小さいフォントサイズにしてもOKみたいです。
input[type="text"] {
font-size: 16px;
transform: scale(calc(12 / 16));
}少しハックな方法かもしれませんが、どうしてもフォーム内に使うフォントサイズを14px程度にしないとダメ！という場合はこれでもいけますね。
CSSでフォントサイズをスマホ標準値にする
先程のように「font-size: 16px;」と16pxで指定してもOKなのですが、スマホの場合は何も指定していないと16pxになります。
なので今現在フォーム要素に当てているCSSを見つけてfont-size:xxの記述を削除してしまうか、フォントサイズをブラウザ規定値のmediumにしてもOKです。
input[type="text"] {
font-size: medium;
}大概のブラウザでフォントサイズの規定値はスマホが16px、パソコンが18pxになっていますのでこれでもズームされなくなるはずです。（一応ブラウザによりますが...）
使う事は少ないと思いますが、WordPressなんかだとCSSの一括設定などの兼ね合いでこの方法が生きる時もあるかと思います。当サイトではコメント欄のフォーム部分にはmediumを指定していたりします。
viewport要素で「user-scalable=no」を使う
最後に非推奨ですが「user-scalable=no」を使う方法です。
これはユーザーに画面のズームをさせなくするためのタグです。
<head> <meta name="viewport" content="user-scalable=no"> </head>
こんな感じです。
ユーザーにズームを許可しないという設定ですが、ユーザビリティの観点からiOS10以降ではこの値は無視されます。今回のフォーム要素の自動ズームと同じく、これもiOSの仕様です。
ただ「user-scalable=no」を使っているとユーザビリティ的に良くないのでGoogleのサイト診断ツールである「PageSpeed Insights」でも指摘されます。
結局のところ、iOSでフォーム要素にズームさせなくする為には、フォントサイズを基準値の16px（以上）に設定しておくというのが一番良さそうです。
勝手にズームしないか動作確認
CSSを変更したら、キャッシュを削除して実機で確認してみましょう。
-
- （Before）font-size: 14pxの時
-
- （After）font-size: 16pxの時
大丈夫そうですね！
iOS独自の仕様は結構多いですが、実機が無いと分からないのが痛いところです。
今回もたまたま実機で発見できたので対処できましたが...まだ何かありそう...
他のフォームも確認しておきましょう。
と思っていたら、後日コメント欄の入力フォームにもズームしちゃうことが判明！
フォントサイズの設定はフォームごとに異なる場合があり、16px未満のフォームならズームされちゃうので皆さんもご注意を...全フォーム確認しましょう！
まとめ
以上iOSで入力フォームにズームされる問題と、ズームさせなくする方法でした。
何だかんだ長くなったので最後にこの記事のポイントを纏めておきます。
ポイント
- iOSはフォームのフォントサイズによって自動でズームすることがある。
- Safari以外のChromeなどのブラウザでも同様にズームする。
- フォントサイズが16px未満のフォーム要素がズーム対象。
- ズームさせたくないならfont-sizeを16px以上（medium）に設定する。
- 「user-scalable=no」を使う場合は若干デメリットあり。
ほんと、フォームに意図せず勝手にズームされると困ることもありますよね～
iOSの自動ズームでサイトの使用感が悪化する可能性もあるので、改善できるなら改善しておきたい内容ですね！
ではではこのへんで・ｗ・
