[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여부를 체크한 코드이다.
만약, 사용자 환경이 웹인 경우, 마우스, 터치패드 인터렉션이 가능합니다, 모바일인 경우 터치가 가능합니다로 뜬다.

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여부를 체크한 코드이다.
• 만약, 사용자 환경이 웹인 경우, 마우스, 터치패드 인터렉션이 가능합니다, 모바일인 경우 터치가 가능합니다로 뜬다.

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