MENU
CSS

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

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

 

これはiOSの仕様です。

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

 

これを解消します。

解決方法

font-sizeを16pxにします。

transformで縮小させます。

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

 

以上です。

 

記事を読んでくださりありがとうございました。

この記事が参考になった、おもしろかったという方は、広告をクリックしていただけると励みになります。

これからもよろしくお願い致します。