スマホ(iOS)では入力フォームのinputやselectにフォーカスすると画面がズームしてしまう？

iOSでは、入力フォームなどで使うinput要素やselect要素をタップしてフォーカスすると、フォントサイズが16px未満の場合は、画面がズームされてしまいます。

これはiOSではそういう仕様になっているからです。おそらく16px未満のフォントサイズはユーザビリティを損なうという意味だと思います。

入力時や選択時に自動で画面が拡大されるまではいいのですが、入力や選択をし終わっても画面のズームがそのままなので、左右に画面が動いてしまったりしてしまいます。

iOSでinputやselectのタップ時に画面が拡大されない方法

一番手っ取り早い解決策は、iOSの仕様に合わせてフォントサイズを16px以上に指定してあげることです。

そうすれば画面が勝手にズームされるのを防ぐことができます。

もし16px未満のフォントサイズを指定したい場合は、transformプロパティのscaleで縮小サイズを指定するといいでしょう。

フォントサイズ自体は16pxを指定しておきつつ、scaleを使って16pxよりも小さいフォントサイズを表示させるという方法です。

関連記事
transformは平面空間で要素を変形できる【CSS】