[Javascript] 화면 크기 변경 시에 축소

▶Javascript 화면 크기 변경 시에 축소

---

▶설명

---

일반적이 반응형 홈페이지가 아닌 고정된 사이즈의 홈페이지를 만들어야 하는 경우가 있습니다.
그런경우 창의 최소 넓이 미만인 경우에는 Javascript로 zoom을 조정하여 비율 그대로 줄어들게 처리하면 편리합니다.

▶예제

---

코드

function resizeApply() {
  var minWidth = 1200;
  var body = document.getElementsByTagName('body')[0];
  if (window.innerWidth < minWidth) { body.style.zoom = (window.innerWidth / minWidth); }
  else body.style.zoom = 1;
}

window.onload = function() {
  window.addEventListener('resize', function() {
    resizeApply();
  });
}

resizeApply();

설명

해당 스크립트는 body 태그 최하단에 추가하였습니다.
resizeApply 함수는 화면 사이즈가 minWidth 미만인 경우에 zoom 값을 조정합니다.
그리고 window.onload는 페이지의 리소스가 모두 로드 되면 실행되며,
창의 넓이가 조정되면 resizeApply를 실행하도록 이벤트를 추가했습니다.

▶마치며

---

언젠가 다시 사용할 일이 있을 것 같아서 이렇게 작성했습니다.
요즘은 CSS로도 충분히 처리할 방법이 있다고 생각합니만, Javascript로 처리하는 방법을 찾는 분도 있을거라고 생각합니다.