iOSでフォーム選択時に画面がズームされる

2021-3-26

iOSでフォーム選択時（フォーカス時）に画面がズームされてしまうので、その対応方法のメモになります。
iOSでは、フォームのフォントサイズが16px未満だとフォーム選択時にズームする仕様になっているようです。。。

対応方法は３つあります。

1.フォントサイズを16pxにする。

2.フォントサイズを16pxにして、transformのscale()で擬似的に小さく見せる。

input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  transform: scale(calc(12 / 16));
}

3.viewportでuser-scalable=noを設定する
user-scalable=noはユーザーがズームできないようにする指定なので、ユーザビリティ的には推奨されていない。

＜meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” /＞

WORKS