【HTML】スマホでフォーム入力時に勝手にズームされるのを防ぐ！

フォームを選択した時に勝手にズームされることありますよね。それは、iOSでは指定しているフォントサイズが16pxより小さいとフォーカス時にズームされる仕様になっているからです。

デザイン的に問題がないのであればフォントサイズを16px以上に指定すれば問題ないのですが、そうもいかないと思うのでそんな時はviewportの指定を変えてあげれば解消します！

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

上記のように変更してあげればフォーカス時のズームは解消されます。それぞれ、初期値のminimum-scale=0.25、maximum-scale=1.6、user-scalable=yesを変更してあげれば良いです。簡潔に下記のようでも問題はないかと思います。

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

個人的には、勝手にズームされると使いにくいと感じてしまいますが、16pxより小さいと見にくいと感じることもあるのでサイトによって適切な設定が必要ですね。

viewportの設定はなかなか理解が難しく、コピペですましがちなので一度見直していきたいですね…

参考：http://webdev.jp.net/iphone-forcus-zoom-dissolve-user-scalable/