知らなきゃ損するIT教室
Web、アプリ制作、プログラミングを楽しむ個人ブログ
HTML/CSS

入力フォームをタップした時に「拡大させない」方法

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

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

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

 

解決方法

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

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

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

 

参考サイト

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