DEV Community

loading...

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

Nathaniel
Web Developer. I make doodad.dev, prodtodolist.com, my personal site is endtimes.dev
Originally published at endtimes.dev ・1 min read

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.

Discussion (0)

Forem Open with the Forem app