윈도우창의 크기 조절(자바스크립트 , 제이쿼리 방법)

용도 : 각 디바이스마다 다른 이벤트 동작이 필요한 경우, 반응형웹 구현시 css를 사용하지 않고 스크립트를 사용하는 경우

 

 

자바스크립트 윈도우창의 크기 조절

---

resize 이벤트는 브라우저 크기 변화(document view)에 따라 발생합니다. window.onresize 속성을 사용하거나 window.onresize 속성(어트리뷰트)을 사용하거나,window.addEventListener('resize', ...)를 사용하여, 이벤트 핸들러에 resize 이벤트를 등록할 수 있습니다. onresize 프로퍼티는 window 객체이므로 document 객체와 혼용하지 않도록 합니다. (익스플로러에서만 가능한 방법이기 때문*)

 

window.addEventListener('resize', function() {
  console.log('Resizing...');
}, true);

window.onresize = function(event) {
  console.log('Resizing...')
};

window.resizeTo(200,200); // 지정한 크기로 변한다.(가로,세로)
window.resizeBy(-100,50); // 현재 크기에서 값만큼 변화를 준다

 

 

* 일부 브라우저의 이전 버전에서는...

일부 브라우저의 이전 버전에서는 모든 HTML 요소(엘리먼트)에 resize 이벤트 핸들러를 등록 할 수 있었습니다. 여전히 onresize 속성을 사용하거나, addEventListener()를 사용하여 모든 요소에 핸들러를 설정할 수 있습니다. 그러나 resize 이벤트는 오직 window객체(document.defaultView)에서만 발생합니다(전달합니다). window 객체에 등록된 핸들러만 이벤트를 수신합니다.

모든 요소가 resize 변경을 알림받을 수 있도록 하는 새로운 제안(proposal 2017)이 있습니다. 드래프트문서를 읽으려면 Resize Observer를 참조하고, 진행중인 토론을 읽으려면 Github issues 문서를 참조하세요.

 

 

 

제이쿼리 윈도우창의 크기 조절

---

resize()는 브라우저 창의 크기가 바뀌게 되면 콜백함수를 호출하여 코드를 실행합니다. 제이쿼리의 resize() 이벤트는 브라우저 크기에 따라 계속해서 구문을 실행하므로 사용이 빈번한 경우 브라우저의 성능을 크게 저하시킬 수 있기에 debounce 등을 사용하여 이벤트 간격을 100ms 단위로 제한하는 방법 등이 고려되면 더욱 좋습니다.

 

$(window).resize(function (){  
  if (window.outerWidth <= 800) {
    alert('현재 브라우저 크기가 <= 800px');
  }
})

 

브라우저 크기 확인 명령어

window.innerWidth : 브라우저 화면의 너비
window.innerHeight : 브라우저 화면의 높이
window.outerWidth : 브라우저 전체의 너비
window.outerHeight : 브라우저 전체의 높이

 

 

 

 

추가 내용

---

jQuery resizable 첫 번째 요소에서만 작동한다면? 해결은 이렇게

 

출처

• https://webisfree.com/
• https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event