iOSでフォーム入力時に画面がズームされる

iOSでフォーム入力時時に、画面がズームされてしまう問題を対応する機会があったので、調べた内容をメモ。

サンプルコード

まずは対応前のサンプルです。

<form>
  <div class="form-value">
    <input type="text" name="text">
  </div>
  <div class="form-value">
    <select name="select">
      <option value="">吉田優子</option>
      <option value="">千代田桃</option>
      <option value="">リリス</option>
      <option value="">陽夏木ミカン</option>
    </select>
  </div>
</form>

input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 12px;
}
select {
  box-sizing: border-box;
  width: 100%;
  font-size: 12px;
}

iOSでズームされてしまうデモページ

フォームを入力しようとすると、以下のようにズームされてしまいます。

ズームされてしまう原因としては、フォームのフォントサイズが16px未満だとフォーム入力時にズームする仕様になっているようです。
　

対応方法1

16px未満でズームされてしまうため、フォントサイズを16px以上にすると解消できます。

input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
}
select {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
}

デザイン的にフォントサイズを大きくして問題ないのであれば、この方法が一番簡単です。
フォントサイズを16pxにした場合のデモページ
　

対応方法2

フォントサイズを16pxにした状態で、transformのscale()で擬似的に小さく見せる方法もあります。

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

sccale()の値はcalc()を使って計算するようにしています。
sccale()で対応する場合のデモページ
ただこの場合、フォントサイズだけでなく全体的な見た目が縮小されてしまうので、要素自体のサイズや位置などの調整も必要になってきます。
　

対応方法3

viewportでuser-scalable=noを設定することでも対応できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

user-scalable=noはユーザーがズームできないようにする指定なので、ユーザビリティ的には推奨されていない指定になります。
user-scalable=noを設定した場合のデモページ

ただデモをiOSのSafariとchromeで確認して見ましたが、ユーザー側の操作でズームできるようでした。(フォーム入力時にはズームはされませんでした。)
調べてみると、iOS10からuser-scalable=noが効かなくなっているようです。

Androidではuser-scalable=noが効いてしまうので、JavaScriptを使ってiOSだけuser-scalable=noを追加するようにしてみます。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
var ua = navigator.userAgent.toLowerCase();
var isiOS = (ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1);
if(isiOS) {
  var viewport = document.querySelector('meta[name="viewport"]');
  if(viewport) {
    var viewportContent = viewport.getAttribute('content');
    viewport.setAttribute('content', viewportContent + ', user-scalable=no');
  }
}
</script>

これでユーザー側ではズームできる状態で、iOSでフォーム入力時はズームされないようになりました。
iOSでのみuser-scalable=noを設定した場合のデモページ
　

【参考サイト】

• iOSでinputのフォーカス時に画面がズームするのを防ぐ – Qiita
• iOS10のSafariでuser-scalable=no が効かなくズームがされる問題への対策 – Qiita