iOS Safari対応 連打してもズームインしないスピナー

プラス・マイナスのボタンで数値を入力できるスピナーUIのiOS Safari対応版です。

See the Pen Input spinner for iOS Safari by webdev (@webdev-jp-net) on CodePen.dark

どこがiOS Safari 対応?

ですよね。
iOS Safariは viewportの設定でピンチイン・アウトでの拡大・縮小を許容している場合
画面をダブルタップするとブラウザ表示全体がズームインされる仕様です。

スピナーボタンで入力するときは、おのずとボタンを連打することになるため
意図せずこのズームインが発動すると、とても煩わしいです。

codepenのサンプルはiframe内に表示されるため、この症状が再現できないので
本当にダブルタップでズームインしなくなっているか、確認用にサンプルを用意しました。

iPhone確認用サンプル

連打してもズームインさせない方法

CSSでできました。
htmlに対しtouch-action: manipulation;を指定すると、タップ連打してもズームインしないようにできます。

html {
  touch-action: manipulation;
}

これだけでした。

関連記事