MENU
日曜エンジニアのIT道場
ITを学び、DXに備える
    HTML&CSS

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

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

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

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

     

    解決方法

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

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

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