【ウェブ開発】タップ時に入力フォームにフォーカスさせない方法

スマホでウェブサイトの入力フォームをタップすると「入力フォームが拡大してしまう」ことがあります。

これはiOSの仕様です。

iOSでは、input要素のフォントサイズが「16pxより小さい場合」ズームします。

これを解消します。

解決方法

font-sizeを16pxにします。

transformで縮小させます。

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

以上です。