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;
}
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.
- published
- 23 Feb 2021
- modified
- 23 Feb 2021
- author
- Nathaniel
- tags
posts
iOs
html
css