[2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침

---

자바스크립트에 미디어쿼리 사용하기

---

css에 사용하는 방법과 비슷합니다. 

그런데!!! 자바스크립트에서는 브라우저 사이즈 변경시 새로고침을 안해주면 적용이 안됩니다. ㅠㅠ...

그래서 브라우저 크기를 변경할 때 마다 자동으로 새로고침 해주는 스크립트까지 짜주시는게 좋습니다.

 

아래는 자바스크립트로 미디어쿼리문을 작성한 코드입니다.

if(matchMedia("screen and (max-width: 767px)").matches){ 
  //화면 크기가 767px이하일때
  console.log("mobile");
}else if(matchMedia("screen and (max-width: 1023px)").matches){
  //화면 크기가 1023px이하일때
  console.log("tablet");
}else if(matchMedia("screen and (min-width: 1024px)").matches){
  //화면 크기가 1024px 이상일때
  console.log("desktop");
}

위에 코드만 작성하게 되면 브라우저 크기를 줄이거나 늘릴때, 수동으로 새로고침 버튼을 눌러줘야 됩니다.

(*아래 영상 참조해주세요)

 

위 영상에서는 제가 직접 수동으로 새로고침을 눌러줬습니다. 

하지만 제가 원하는 코드는 브라우저 크기가 변할때 마다 자동으로 새로고침 되는 것입니다.

 

아래 코드와 같이 onresize함수를 이용하면, 브라우저 크기가 변할때마다 자동으로 새로고침이 됩니다.

if(matchMedia("screen and (max-width: 767px)").matches){
  console.log("mobile");
}else if(matchMedia("screen and (max-width: 1023px)").matches){
  console.log("tablet");
}else if(matchMedia("screen and (min-width: 1024px)").matches){
  console.log("desktop");
}

window.onresize = function(){
  document.location.reload();
};

 

(* 브라우저 크기 변경시 자동으로 새로고침 되며, 적용한 화면 범위마다 콘솔창에 알맞은 글자를 띄움)

---

이 방법을 쓰면 뭔가 렉이 걸리는 듯한 현상(?)이 있습니다. 

아무래도 브라우저 크기를 변경할때마다 새로고침을 하니 자연스럽게 창크기가 변하는것이 아니라, 

드드드드득 하면서 변합니다.

 

하지만 현재 제가 아는 방법은 이거 하나뿐입니다.

혹시 더 좋은 방법을 알고계신분 있으시면 꼭 알려주세요 ㅠ_ㅠ