JavaScript에서 화면 너비가 값보다 크거나 작은지 감지하는 방법

JavaScript에서 화면 너비가 지정된 값보다 크거나 작은지 감지하는 방법을 알아보세요.

때로는 조건에 따라 코드를 실행하고 싶을 때가 있습니다.

제한된 공간 때문에 큰 화면에는 표시하고 싶지만 작은 화면(대부분의 스마트폰과 같은)에는 표시하지 않으려는 코드가 있을 수 있습니다.

특정 기기 유형 감지 처리 개발자가 동의할 수 없는 복잡한 영역입니다. 몇 시간 동안 조사한 후에도 여전히 펜을 종이에 대도록 충분한 신뢰할 수 있는 데이터를 수집하지 못했습니다(계속..).

화면 너비를 픽셀 단위로 동적으로 감지하는 방법

다행히 픽셀 값을 기반으로 화면 크기를 타겟팅하는 것이 훨씬 더 쉽고 많은 상황에서 이점을 얻을 수 있는 기능입니다.

다음 코드를 브라우저 콘솔이나 CodePen과 같은 온라인 편집기에 붙여넣습니다.

window.addEventListener("resize", function() {
  if (window.matchMedia("(min-width: 500px)").matches) {
    console.log("Screen width is at least 500px")
  } else {
    console.log("Screen less than 500px")
  }
})

이제 브라우저 창의 크기를 좁은 곳에서 넓은 곳으로 조정하고 콘솔에서 로그아웃한 결과를 관찰하세요.

자바스크립트 코드 작동 방식:

• 먼저 addEventListener()를 첨부합니다. 창 개체에 대한 메서드입니다.
• 이벤트 리스너 내에서 두 개의 인수 'resize'를 설정합니다. 및 function() {} .
• 첫 번째 인수는 이벤트 리스너가 크기 조정 이벤트를 수신하도록 요청하는 것입니다. (크기 조정의 일부라도 이벤트로 등록됩니다.) 그런 다음 익명의 함수를 실행합니다. 크기 조정 이벤트를 기반으로 합니다.
• 익명 함수의 본문 내에서 두 개의 조건문을 시작합니다.
• 첫 번째 조건: "(모든 장치의) 화면 너비가 최소 500px이면 console.log('무언가 수행')"입니다. 두 번째 조건: "화면 너비가 500px보다 작으면 console.log('다른 작업을 수행')"입니다.

CodePen에서 코드로 플레이