CSS로 기기 파악하기

개발

CSS로 기기 파악하기
최종 수정일:

Interaction Media Features

Interaction(상호작용) 미디어 쿼리를 이용하면 사용자가 웹페이지와 어떻게 상호작용하는지 CSS에서 판단할 수 있습니다.

pointer: nonepointer: coarsepointer: fine
hover: none키보드 등스마트폰, 터치 스크린 등스타일러스 기기(와콤 등)
hover: hover닌텐도 위 컨트롤러, 키넥트 등마우스, 터치 패드, 고급 스타일러스 기기(삼성 노트 시리즈, 와콤 인튜어스 프로 등)

기본 장치 중심

후술할 pointerhover는 "기본(primary)" 포인팅 장치가 어떤 특성이 있는지 확인합니다.

참고: CSS 명세서엔 기본 장치를 어떻게 결정할지는 정의되어있지 않습니다. 사용자가 현재 어떤 상황인지에 따라 브라우저가 동적으로 판단하고 변경할 수도 있단 뜻입니다.

pointer

마우스와 같은 포인팅 장치의 존재를 판단하는데 사용됩니다. 상술했듯 "기본" 장치의 특성을 확인합니다.

none

포인팅 장치가 없습니다.

coarse

기본 장치가 터치스크린이나 키넥트처럼 정확도는 높지 않지만 포인팅은 가능합니다.

fine

기본 장치가 마우스나 터치 패드처럼 정확한 포인팅이 가능합니다.

참고: UA가 사용자에게 확대/축소 기능을 제공하거나, 정확도가 높은 보조 장치가 있을 수 있으므로, pointer: coarse라고 반드시 모든 상황에서 pointer: fine보다 포인팅 정확도가 낮은 것은 아닙니다.

hover

사용자가 요소 위로 포인팅 디바이스를 위치시킬 수 있는지 판단하는 데 사용됩니다. 쉽게 말하면 그냥 문자 그대로 hover가 가능한지 판단하는 것이고, pointer와 마찬가지로 "기본" 장치의 특성을 확인합니다.

none

기본 장치가 호버가 불가능하거나, 포인팅 장치가 없습니다.
혹은 호버가 가능한 장치가 있으나, 꾹 누르는 동작이 호버로 인식되는 터치스크린처럼 불편하거나, 일반적이지 않은 방식으로 호버가 가능한 장치입니다.

hover

기본 장치로 요소(페이지의 특정 영역)에 정확히 호버가 가능합니다.

보조 장치까지 고려하기

any-hover, any-pointer

상술한 쿼리가 기본 장치만으로 판단을 내렸다면, 위 쿼리는 모든 입력 메커니즘을 확인합니다.
가능한 모든 장치를 고려하기 위해 가능하면 위 쿼리의 사용을 권장합니다.

any-pointer, any-hover 모두 상술한 쿼리와 보조 장치 고려 여부만 제외하면 같습니다. 여러 포인팅 장치 중 적어도 하나가 해당 특성을 만족하면 해당 기능을 지원한다고 판단합니다.

직접 확인하기

예로부터 백문불여일견이라 했습니다.
사용하시는 장치의 입력 메커니즘에 따라 바뀌는 페이지입니다. 특성을 만족하지 않으면 회색, 만족하면 연보라색으로 표시됩니다.
개발자 도구를 이용해 UA를 변경해도 정상적으로 작동합니다.

전 본가에 내려가면 wii로 접속해볼 예정입니다. 😎

Report an issue