[CSS] PC와 Mobile을 구분하는 2가지 방법

😊 이번 시간에는 css를 사용해 pc와 mobile을 구분하는 방법에 대해 알아보았다!

1. ontouchstart로 구분하기

1) touchstart 이벤트?

• touchstart 이벤트는 터치가 가능한 디바이스에서만 발생한다.
• 만약 터치가 불가한 환경(ex. pc)인 경우 ontouchstart값은 undefined가 된다.

window.ontouchstart;

2) 사용법

💡 CSS에서 PC, Mobile별로 다른 스타일을 주고 싶다면, 아래 방법을 써보자!

(1) ontouchstart여부를 dataset에 저장해준다.

// js
function checkTouchable() {
  document.body.dataset.touchable = !!window.ontouchstart;
}

checkTouchable();

(2) 그리고 data- 선택자를 이용해 data-touchable 여부에 따라 스타일을 달리해주면 된다.

/* SCSS */

body[data-touchable= 'true'] {
  /* 터치 가능한 환경에서 적용한 CSS */
}

body:not([data-touchable= 'true']) {
 /* 터치 불가한 환경에서 적용한 CSS */
}

(3) 아래 예시는 ontouchstart와 data- 속성을 이용하여 pc, mobile여부를 체크한 코드이다.
만약, 사용자 환경이 웹인 경우, 마우스, 터치패드 인터렉션이 가능합니다, 모바일인 경우 터치가 가능합니다로 뜬다.

See the Pen touch check 2 by KumJungMin (@kumjungmin) on CodePen.

2. Media query로 구분하기

CSS Media Queries Level 4에 추가된 hover, pointer쿼리로 웹, 모바일 구분이 가능하다.

1) hover, pointer 쿼리란?

(1) hover 쿼리

• hover 쿼리는 장치상 호버가 발생가능한지 판단하는데, 총 2가지 값(none, hover)을 가진다.

@media (hover: hover) {
  /* hover 가능한 경우 */
}

@media (hover: none) { 
 /* hover 불가능한 경우 */  
}

(2) pointer 쿼리

• pointer 쿼리는 포인팅 장치(ex. 마우스, 터치패드) 유무는 물론 구체적인 포인팅 장치를 판별할 수 있다.
• 해당 쿼리는 총 3가지 값(none, coarse, fine)을 제공한다.

@media (pointer: none) {
  /* 포인팅 장치 미포함 */
}

@media (pointer: coarse) { 
  /* 포인팅 장치가 있음(터치스크린, 모션 감지 센서) */
}

@media (pointer: fine) {
  /* 포인팅 장치가 있음(마우스, 터치패드, 타블렛 펜) */
}

2) hover & pointer 쿼리 조합하기

• hover와 pointer쿼리를 조합하면 트랙패드, 마우스 등 디바이스별 스타일링이 가능하다.

	pointer: coarse	pointer: fine
hover: none	스마트폰, 터치스크린	타블렛 펜
hover: hover	닌텐도 will 컨트롤러, 키넥트	마우스, 터치패드

@media (hover: none) and (pointer: coarse) {
  /* 터치가능한 디바이스(스마트폰, 터치스크린) */
}

@media (hover: hover) and (pointer: fine) {
  /* hover 가능(마우스, 터치패드) */
} 

• 아래 예시는 hover, pointer 쿼리를 사용하여 pc, mobile여부를 체크한 코드이다.
• 만약, 사용자 환경이 웹인 경우, 마우스, 터치패드 인터렉션이 가능합니다, 모바일인 경우 터치가 가능합니다로 뜬다.

See the Pen touch check by KumJungMin (@kumjungmin) on CodePen.

추가적으로 쿼리를 이용한 모바일 판별법에는 pointer, hover쿼리 외에도 any-pointer, any-hover가 있는데 알아보면 좋을 듯 하다