プラス・マイナスのボタンで数値を入力できるスピナー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内に表示されるため、この症状が再現できないので
本当にダブルタップでズームインしなくなっているか、確認用にサンプルを用意しました。
連打してもズームインさせない方法
CSSでできました。html
に対しtouch-action: manipulation;
を指定すると、タップ連打してもズームインしないようにできます。
html { touch-action: manipulation; }
これだけでした。