Prevent double tap in web

JaeYeopHan / tip-archive

📦 Archiving various development tips. If you watch this repository, you can get issues related to the newly registered development tip from the GitHub feed.

https://www.facebook.com/Jbee.dev/

245 stars 8 forks source link

Prevent double tap in web #44

Open JaeYeopHan opened 5 years ago

JaeYeopHan commented 5 years ago

Description

Disable double tab

Solution 1

Add meta tag with user-scalable

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,user-scalable=0">

Solution 2

Add touch-action property to element

/* Disable double tab in menu*/
.selector {
  touch-action: manipulation;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

JaeYeopHan commented 5 years ago

solution 1 방법으로 하면 safari에서 동작하지 않는다.

JaeYeopHan commented 5 years ago

solution 2도 거의 적용되지만 button이나 img에서는 먹히지 않는다. button인 경우에는 button 엘리먼트 자체에 manipulation을 적용하면 더블탭을 방지할 수 있다.