반응형 웹 디바이스 구분하기

반응형 사이트의 경우 사이트 경로가 동일하여 디바이스에 따른 구분을 하기 힘든데요. 스크린의 크기를 지정하여 구현하는 방법도 가능하지만 코드를 통해 간단히 구현하는 방법을 안내해 드리겠습니다.

구현하기

사용할 코드는 아래와 같은데요.

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

 

화면에 따라 코드를 테스트 해 보면 아래처럼 디바이스에 따라 다른 값이 반환되는 것을 확인 가능합니다.

PC

Mobile

따라서 반환되는 값을 조건으로 지정하여 코드를 구현하면 됩니다!