FrontEnd/Device classification issue

사용자가 웹사이트에 접속을 할때 모바일, 태블릿, pc 등의 화면 크기에 따라 반응하는 반응형 웹을 시도해보고 싶었다. 그래서 우선 모바일로 접속하는지, pc로 접속하는 지를 구분하기 위해 미디어쿼리의 기능 중 @media (hover: hover)을 이용해서 컴포넌트의 배치 및 비율을 다르게 css를 구현했다.

@media (hover: hover){ };

하지만 모바일에서 접속했음에도 불구하고 갤럭시 10, 갤럭시 21, 갤럭시s10 등 갤럭시 유저들에게서 pc에서 설계된 디자인이 구현되는 것을 확인했다.

문제는 @media (hover: hover)에서 pc와 모바일을 제대로 필터링하지 못했다는 점이었다. 사용자가 기본 포인팅 장치를 사용해 특정 요소 위로 hover 할 수 있는 경우 hover:hover이 된다. 이때 기본 포인트 장치의 hover 기능의 가능 여부를 확인하는 것이기 때문에 모바일과 pc를 구분할 때 hover을 이용해서 구분하는 것이 가능하다고 판단을 했었는데 몇 모바일 기종에서 hover의 기능이 가능하다고 필터링이 되었다.

따라서 문제를 해결하기 위해 @media (pointer : fine)을 추가해서 pc와 모바일 구분 기준을 엄격화 시켰다. fine의 경우에는 기기에 마우스와 같이 정확한 포인팅 장치가 포함되어야 하며, 터치스크린 및 모션 감지 센서 같은 coarse와도 구분이 되기 때문에 더 정밀한 구분이 가능하였다.

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