> For the complete documentation index, see [llms.txt](https://doongu.gitbook.io/pk_select/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doongu.gitbook.io/pk_select/issue/frontend/frontend-device-classification-issue.md).

# FrontEnd/Device classification issue

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

```css
@media (hover: hover){ };
```

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

![](https://3663972659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiZpKmP92-pLA9_KmoC%2Fuploads%2FJYUk5CZ7nAaexW37HkKx%2F%E1%84%86%E1%85%A9%E1%84%87%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF.png?alt=media\&token=9c51ab90-0f03-49fe-ad90-3941c5dd4ffc)

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

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

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