By aPOST in CSS — 2023년 12월 23일

CSS로 터치 스크린 장치 화면 구분하기

반응형 웹이나 모바일 기기를 위한 미디어 쿼리(@media)는 많이 사용되지만, 특별히 터치 스크린 장치를 위한 별도의 처리는 잘 하지 않기 때문에 대부분 CSS로 터치 스크린 장치에 대한 처리를 하는 미디어 쿼리는 대부분 모릅니다.

미디어 쿼리(@media)를 사용하면 터치 스크린 장치에 위한 화면 레이아웃 처리, 또는 예외 처리를 할 수 있습니다.

모바일 기기와는 달리 키오스크나 터치 모니터로 풀화면 상태로 구현하는 대형 모니터 기기에 터치 UI를 웹으로 구현할 경우, 미디어 쿼리로 터치 장치를 위한 CSS를 별도로 작성하게 됩니다.

이런 경우 웹브라우저를 풀화면으로 구동하거나 앱에서 임베드 웹브라우저를 구동해 웹페이지를 열어 풀화면으로 터치 레이아웃을 구현하게 됩니다.

터치 스크린을 위해 작성한 CSS는 별도 파일로 구분해서 터치 스크린일 경우에만 사용하도록 분리를 할 수 있어 불필요한 리소스 낭비를 막을 수도 있습니다.

터치 스크린 장치를 위한 CSS 를 "touch.css"에 분리해 작성했으면

HTML 페이지에 연결하는 메인 CSS에 다음과 같이 CSS 를 모듈로 임포트 합니다.

@import url('touch.css') screen and (any-pointer: coarse);

"any-pointer: coarse"는 터치 스크린에 대한 미디어 쿼리 입니다.

터치 스크린이면 "touch.css" 파일을 임포트 해 로딩합니다.

앞서 포인터 타입으로 "coarse" 를 사용했습니다.

"거친, 조악한" 이라는 뜻을 가진 단어로 터치 스크린이 마우스 포인터 처럼 정밀한 포인터 처럼 정밀한 포인팅 장치가 아니기 때문에 "coarse" 라는 단어로 정의를 합니다.

터치 스크린이 아닌 정밀한 포인팅 장치(마우스) 를 터치 스크린과 구분해서 CSS를 따로 구분하려면 "coarse" 대신 "fine" 을 사용하면 됩니다.

예를 들어 터치 스크린 장치가 아닌 포인팅 장치를 위한 CSS를 정의하려면 다음과 같이 미디어 쿼리를 작성하면 됩니다.

@media screen and (any-pointer:fine){
	/*정밀 포인팅 장치를 위한 CSS*/
}
@media screen and (any-pointer:coarse){
	/*터치 스크린 장치를 위한 CSS*/
}

터치 스크린 기기 테스트는 웹 브라우저 개발자 도구의 모바일 기기 보기 기능으로 테스트 할 수 있습니다.

웹 브라우저의 모바일 기기(스마트폰) 보기는 기본적으로 터치 스크린으로 동작하도록 되어있기 때문에, 개발자 도구 모바일 화면 보기로 전환하면 터치 스크린 CSS가 실행됩니다.

터치 스크린을 가진 노트북에서는 "any-pointer:coarse" 와 "any-pointer:fine"이 모두 로딩됩니다.

최종적으로 적용되는 것은 나중에 나오는 CSS 입니다.

이런 이유로 인해 터치 스크린 인식 미디어 쿼리를 사용할 경우, 제한적인 용도로 사용해야 합니다.

미디어 쿼리 "coarse" 속성을 반응형으로 모바일 기기를 인식하는 용도로 사용해서는 안됩니다.

터치 스크린을 가진 대형 타블렛, 또는 외장 모니터도 터치 스크린 장치로 인식되며, 세상에는 터치가 되지 않는 휴대폰(KaiOS 등)도 많이 있기 때문입니다.

파이어폭스는 2020년 9월 업데이트 된 버전 81부터 "coarse" 속성을 지원합니다. 구 브라우저인 인터넷 익스플로러를 제외한 모든 브라우저에서 "coarse" 속성을 사용할 수 있습니다.