반응형 뷰(PC, Mobile)를 위한 JavaScript, jQuery (JavaScript, jQuery for Responsive layout view)

누군가 나와 같이 PC와 모바일과 레이아웃 차이가 클 때 어떻게 해야할까 고민하고 있다면 다음과 같은 솔루션이 도움이 되었으면 좋겠다.

// 웹페이지 로딩이 되었을 때 넓이 값을 확인하고 기기에 따라 클래스 등을 넣어준다.
$(window).load(function(event){
  let windowWidth = event.currentTarget.innerWidth;
  if (windowWidth > 767) {
    // 모바일보다 큰 디바이스인 경우
  }else{
   // 모바일보다 작은 디바이스인 경우
  }
});
// 웹페이지 사이즈가 변경되었을 때 넓이 값을 확인하고 기기 넓이에 따라 클래스 등을 넣어준다.
$(window).resize(function(event){
  let windowWidth = event.currentTarget.innerWidth;
  if (windowWidth > 767) {
    // 모바일보다 큰 디바이스인 경우
  }else{
    // 모바일보다 작은 디바이스인 경우
  }
}

javascript 로 짜는 경우는 window.onload 등으로 대체하면 똑같이 사용할 수 있다.