I've been building an new website with lots of number inputs
. The browser default number inputs
tend to have very small step-up
and step-down
buttons. (the little arrow buttons that increment the value up or down one step)
So, I made my own step
buttons to make the targets easier to click. They worked fine, except on iOS
devices. By default on iOS
, double-tapping on an element zooms in.
Since these buttons are pressed many times in a row, you end up having to zoom out every time you use them. It's very annoying.
Anyway, here's a simple css
solution that stops the double-tap zoom
.
button {
touch-action: manipulation;
}
touch-action
is a css
property that defines how an element can be used by a touch screen.
Of course, you shouldn't stop everything being zoomable, just specific elements that are causing trouble.
You can see the number input in action on this simple dice rolling tool I made.
Top comments (2)
Ahhh, perfect. I had never seen this property before. I had an "increment" button that was zooming-in if pressed in quick succession. This seems to have solved it. Awesome!
Thank you!