수년 동안 모바일 브라우저는 두 번 탭이 될지 여부를 확인하는 동안 touchend과 click 사이에 300~350ms의 지연 시간을 적용했습니다. 두 번 탭이 텍스트를 확대하는 동작이었습니다.
Android용 Chrome이 처음 출시된 이후로 손가락 모으기/확대/축소도 사용 중지되었다면 이러한 지연은 없어졌습니다. 그러나 손가락 모으기 확대/축소는 중요한 접근성 기능입니다. 2014년에 출시된 Chrome 32부터는 핀치 줌을 삭제하지 않고 모바일에 최적화된 사이트에서 지연이 사라졌습니다. Firefox와 IE/Edge는 얼마 지나지 않아 같은 작업을 수행했으며, 2016년 3월에는 iOS 9.3에도 유사한 수정사항이 적용되었습니다.
실적 차이가 엄청나네요.
즉각적으로 반응하는 UI를 통해 사용자는 잠시 멈추고 응답을 기다릴 필요 없이 확신을 갖고 각 버튼을 빠르게 누를 수 있습니다. RAIL 소개에서 인간 반응 시간 및 웹 성능의 영향에 대해 자세히 알아보세요.
300~350밀리초의 탭 지연을 제거하려면 페이지의 <head>에 다음만 있으면 됩니다.
<meta name="viewport" content="width=device-width">
이렇게 하면 표시 영역 너비가 기기와 동일하게 설정되며 일반적으로 모바일에 최적화된 사이트를 위한 권장사항입니다. 이 태그를 사용하면 브라우저는 사용자가 휴대기기에서 텍스트를 읽을 수 있다고 가정하며, 두 번 탭하여 확대/축소 기능은 더 빠른 클릭을 위해 대신 사용됩니다.
어떤 이유로든 이렇게 변경할 수 없는 경우 touch-action: manipulation를 사용하여 페이지 전체 또는 특정 요소에 동일한 효과를 얻을 수 있습니다.
html {
touch-action: manipulation;
}
이 기법은 Safari에서는 지원되지 않으므로 표시 영역 태그를 사용하는 것이 좋습니다.
두 번 탭하여 확대/축소하면 접근성 문제가 생기나요?
아니요. 손가락 모으기 확대/축소는 계속 작동하며 OS 기능은 이 동작을 어렵게 느끼는 사용자를 위한 것입니다. Android에서는 확대 동작이 이를 처리합니다. 이러한 도구는 브라우저 외부에서도 작동합니다.
이전 브라우저는 어떤가요?
FT Labs의 FastClick은 터치 이벤트를 사용하여 클릭을 더 빠르게 실행하고 두 번 탭 동작을 삭제합니다. touchstart와 touchend 사이에서 손가락의 움직임을 확인하여 스크롤과 탭을 구분합니다.
리스너를 호출하여 event.preventDefault()인지 확인하는 방식으로 스크롤과 같은 하위 수준 상호작용이 지연되므로 모든 항목에 touchstart 리스너를 추가하면 성능에 영향을 미칩니다. 다행히 FastClick은 브라우저에서 이미 300ms 지연을 제거한 경우 리스너를 설정하지 않으므로 두 가지의 이점을 모두 누릴 수 있습니다.