[JavaScript] 자바스크립트에서 윈도우 사이즈 확인하기

091_자바스크립트에서 윈도우 사이즈 확인하기

[적용]

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

---

[문법]

속성	의미	반환
window.innerWidth	브라우저 뷰포트(Viewport)의 가로 길이	숫자
window.innerHeight	브라우저 뷰포트(Viewport)의 세로 길이	숫자

---

[내용]

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

 

화면의 가로와 세로의 길이를 알게 되면 다양한 작업이 가능해진다. 예를 들어 동영상을 전체 화면으로 표시하거나, 스크롤 속도에 따라 화면의 반응을 조절하는 작업 등이 가능하다.

다음의 샘플과 같은 스크립트가 사용되며, 단위는 px이다.

 

window 객체를 참조하는 범위는 전역이므로 window.를 생략해도 상관없으며,

해당 속성은 읽기 전용이므로 수정이 불가능하다.

// 화면의 가로 길이
const w = window.innerWidth;
// 화면의 세로 길이
const h = window.innerHeight;

 

innerWidth와 innerHeight는 참조하는 타이밍에 따라 가져오는 사이즈 값이 달라진다.

브라우저 윈도우 창의 크기를 변경하거나 스마트폰의 가로 화면, 세로 화면에 따라 사이즈값이 변한다.

리사이즈 이벤트는 window 객체 resize를 사용하여 확인한다.

window.addEventListener('resize', resizeHandler);

function resizeHandler(event) {
    // 새로운 화면의 가로 길이
    const w = innerWidth;
    // 새로운 화면의 세로 길이
    const h = innerHeight;
    
    document.queryDelector('.value-width').innerHTML = 
        `가로 길이는 ${w}px 입니다.`;
    document.querySelector('.value-height').innerHTML = 
        `세로 길이는 ${h}px 입니다.`;
}

 

 

---

 

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김