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

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

iOSでは、input要素に指定しているフォントサイズが「16px」を下回ると、フォーカス時にズームされる という仕様があるからです。

でも、勝手にズームインされてしまうと、デザイン的に良くなかったり、使い勝手が悪いサイトになってしまうことがあります。

解決方法

フォントサイズは16pxにしておいて、transformで縮小させればOKです。

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

これで、入力フォームをタップしても拡大されずにすみます。