[책] 자바스크립트 코드 레시피 278 - 83일차

윈도우 사이즈 확인하기

• 화면을 브라우저 크기에 맞춰 표시하고 싶을 때
• 화면 폭에 맞춰 처리 작업과 레이아웃을 변경하고 싶을 때

구문

window.innerWidth;
window.innerHeight;

실습

브라우저의 표시 영역 크기를 윈도우 사이즈라고 하며, 윈도우 창이 표시되는 사이즈는 innerWidth 와 innerHeight 를 사용해 가져올 수 있습니다. 사이즈 값은 주소창, 북마크, 개발자 도구 등 주변의 인터페이스는 포함되지 않은 순수한 화면의 사이즈입니다.

화면의 가로와 세로의 길이를 알게 되면 다양한 작업이 가능합니다. 예를 들어 동영상을 전체 화면으로 표시하거나, 스크롤 속도에 따라 화면의 반응을 조절하는 작업 등이 가능합니다. 다음의 샘플과 같은 스크립트가 사용됩니다. 단위는 px입니다.

window 객체를 참조하는 범위는 전역이므로 window. 를 생략해도 상관없으며, 해당 속성은 읽기 전용이므로 수정이 불가능합니다.

const widthSize = window.innerWidth;
const heightSize = window.innerHeight;
console.log(widthSize); // 화면의 가로 길이
console.log(heightSize); // 화면의 세로 길이

사이즈 변경할 때 마다 사이즈 측정

innerWidth 와 innerHeight 는 참조하는 타이밍에 따라 가져오는 사이즈 값이 달라집니다. 브라우저 윈도우 창의 크기를 변경하거나 스마트폰의 가로 화면, 세로 화면에 따라 사이즈 값이 변합니다. 리사이즈 이벤트는 window 객체 resize 를 사용하여 확인합니다.

---

index.html

<p class="value-width"></p>
<p class="value-height"></p>

---

script.js

window.onload = () => {

  const widthSize = window.innerWidth;
  const heightSize = window.innerHeight;
  console.log(widthSize);
  console.log(heightSize);

  function resizeHandler() {
    const width = innerWidth;
    const height = innerHeight;

    document.querySelector('.value-width').innerHTML = `가로 길이는 ${width}px 
입니다.`;
    document.querySelector('.value-height').innerHTML = `가로 길이는 ${height}px 입니다.`;
  }

  resizeHandler();

};