[css] 모바일 환경(터치 스크린)에서의 hover 이슈

스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않는다.

따라서, 반응형 작업을 하다보면 등록되어 있는 hover css로 인해 여러가지 사이드 이펙트가 일어날 수 있다.

예를 들어, 태블릿의 가로모드는 PC뷰 세로모드는 모바일뷰를 가지는 서비스가 있다고 할 때

가로모드에서 hover 이벤트를 발생 시키고 세로모드에서 동작 후 가로모드로 돌아오면 hover 이벤트가 살아있다거나..

 

터치 시에 동작하는 이벤트 순서는 아래와 같다.

touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다.

 

터치 인터페이스에서는 hover 효과를 없애주는 분기처리가 필요하다.

기존에 자주 이용하는 방법은 미디어쿼리를 이용해서, 디스플레이 사이즈 별로 디바이스를 구별해주고는 했다.

하지만, 모바일(스마트폰, 태블릿)과 PC 환경은 디스플레이 사이즈만으로 구분하기는 어려워졌다.

 

모바일과 PC의 보다 명확한 차이점은 위와 같이 마우스 클릭인지 터치인지로 나눌 수 있다.

 

Media Queries Level 4에서는 다음과 같은 기능을 지원한다.

Interaction Media Features

인터렉션 미디어 기능은 사용자가 페이지와 상호작용하는 다양한 방식을 반영한다.

	pointer:none	potiner:coarse	pointer:fine
hover:none	키보드 전용 컨트롤, 순차/공간(d-패드) 포커스 탐색	스마트폰, 터치스크린	기본 스타일러스 디지타이저(Cintiq, Wacom 등)
hover:hover		닌텐도 Will 컨트롤러, 키넥트	마우스, 터치패트, 고급 스타일러스 디지타이저(Surfacd, Samsung Note, WacomIntuos Pro 등)

 

따라서 아래와 같은 환경에서 hover 이벤트를 구현해주면 되겠다!

@media(hover: hover) and (pointer: fine) {
}

 

---

Reference

Hover on mobile and tablet

iPad hover 이슈 처리 방법