모바일 기기인지 아닌지 구분하는 css

@media screen and (hover: none) and (pointer: coarse) {
 //code
}

기존의 반응형 웹에서는 해상도(가로)를 기준으로 반응하여 레이아웃을 짠다.

하지만 코딩을 하다보면 해상도와 별개로 PC와 모바일기기를 별개의 레이아웃을 보여줘야할 때가 있으며,
해당 부분은 css만으로 처리가 어렵기 때문에 자바스크립트, 또는 백엔드언어인 JSP, PHP, ASP 등에서 구분지어 별개의 페이지를 출력하거나 소스를 짜는 경우가 있다.

위에 보여진 미디어쿼리는 모바일기기와 PC에서 가장 큰 이벤트 차이인 호버와 포인터 이벤트가 해당 기기에 있는지 없는지를 구분하는 미디어쿼리이다.

해상도에 따라 반응하는것이 아닌 모바일기기이냐 PC이냐에 따라 반응하는 레이아웃을 만들고 싶다면 위의 미디어 쿼리를 사용하자.

단 IE로 대표되는 구형 브라우저에서는 사용할 수 없다