【iOS】inputをフォーカスするとズームされてしまう問題を解決する

iOSでinput要素などのテキストボックスをフォーカスするとズームされてしまうという問題があります。

Androidなどでは平気なんですがiOSだとフォントサイズによってズームされてしまいます。

この現象はinputのフォントサイズが16pxより小さい場合に起こります。

inputのサイズを16px以上にするとズームされなくなります。

まず実機で14pxと16pxの場合を確認してみましょう。

どうでしょうか？

14pxだとちょうど良いサイズですが16pxだと若干大きい感じがしますね。

16pxだと大きいという場合は、transformを使って文字のスケールを下げることで小さくすることができズームも起きません。

css

input[type=text] {
  font-size: 16px;
  transform: scale(0.8);
}