【スマホでのフォーム拡大を防ぐ】スマートフォンでフォームを選択した時に画面が拡大されないようにする方法

このページではサイト管理者がスマートフォンでフォームを選択した時に画面が拡大されないようにする方法です。
それではどうぞ。

スマートフォンでフォーム選択時の画面ズームを回避する方法

HTMLのhead内のviewportで、下のように「user-scalable=no」を指定して下さい。
これでスマートフォンでフォーム選択時の画面ズームを回避する事が出来ます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
タグはこんな感じです。

「user-scalable=no」使用時のメリット

これを使用すると画面のピンチイン・ピンチアウトの拡大縮小が無効化されるので、
フォーム等選択時の画面拡大の違和感をなくします。

その他スマートフォンで下にスクロールした際のグラグラも直します。

「user-scalable=no」使用時のデメリット

確かに画面拡大の違和感は無くなりますが、レスポンシブデザインに使用する場合

PC表示に合わせてた画像をスマホで見た際に字が小さくて見えにくい時があると思います。
その際、「user-scalable=no」を指定していなければ、拡大できるのですが、
指定していればそれが拡大出来なくなります。

なので、レスポンシブデザインには不向きだと言えます。

上記以外で拡大を防ぐ方法

この方法はでサイトを構築してしまった後では、とても面倒くさいかもしれませんが、
全てのフォントサイズを16PX以上にするとこで、問題は回避されるそうです。