iOSでinputのフォーカス時に画面がズームするのを防ぐ

みなさん普段どんなスマートフォンをもってますか?私の場合は前はAndroidだったのですが、今はIOSに変わりました。IOSでSefariを使うとフォームを入力すると勝手にズームしちゃいます。

これはとても便利でありつつも、レイアウト崩れの原因になるので不便です。iOSでは、input要素に指定しているフォントサイズが「16px」を下回ると、フォーカス時にズームされる という仕様のせいです。

したがって、タッチデバイス用のviewport指定として、user-scalable=no にしない(ユーザの操作の任意性を奪わない)ことが最近では推奨されるようになっています。具体的には下記の内容をheadに指定すると直ります。

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

動作確認は実機で確認しないとわからないですね。