DEV Community

Nathaniel
Nathaniel

Posted on • Originally published at endtimes.dev

TIL: You can use css to remove the double-tap zoom feature on iOs

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;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
bennadel profile image
Ben Nadel

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!

Collapse
 
greggcbs profile image
GreggHume

Thank you!