웹 개발을 하다 보면 브라우저 화면의 실제 사용 가능한 크기를 알아야 하는 경우가 자주 있습니다. JavaScript에서는 window.screen 객체가 제공하는 다양한 속성을 통해 브라우저 화면과 관련된 정보를 손쉽게 얻을 수 있습니다.
특히 screen.availWidth와 screen.availHeight 속성을 사용하면 운영체제 인터페이스 요소(예: Windows 작업 표시줄)를 제외한 실제 사용 가능한 너비와 높이를 픽셀 단위로 확인할 수 있습니다. 지금부터 각각의 사용법을 자세히 살펴보겠습니다.
사용 가능한 너비 (Available Width)
screen.availWidth 속성은 방문자 화면의 실제 사용 가능한 너비를 반환합니다. 이 값은 Windows 작업 표시줄과 같은 인터페이스 요소가 차지하는 영역을 제외한 순수한 화면 너비이며, 결과값은 픽셀(pixel) 단위로 표시됩니다.
예제 코드
<html>
<body>
<p id="width"></p>
<script>
document.getElementById("width").innerHTML =
"사용 가능한 화면 너비는 " + screen.availWidth + "px입니다.";
</script>
</body>
</html>실행 결과
사용 가능한 화면 너비는 1366px입니다.
사용 가능한 높이 (Available Height)
screen.availHeight 속성은 화면의 실제 사용 가능한 높이를 반환합니다. 마찬가지로 Windows 작업 표시줄처럼 화면 하단이나 상단에 고정된 인터페이스 요소가 차지하는 공간은 제외되며, 결과값 역시 픽셀(pixel) 단위로 나타납니다.
예제 코드
<html>
<body>
<p id="height"></p>
<script>
document.getElementById("height").innerHTML =
"사용 가능한 화면 높이는 " + screen.availHeight + "px입니다.";
</script>
</body>
</html>실행 결과
사용 가능한 화면 높이는 728px입니다.
정리
두 속성을 비교해 보면 다음과 같습니다.
- screen.availWidth: 작업 표시줄 등을 제외한 사용 가능한 화면의 전체 너비
- screen.availHeight: 작업 표시줄 등을 제외한 사용 가능한 화면의 전체 높이
참고로 일반적인 screen.width, screen.height와 달리 avail 계열 속성은 시스템 UI가 점유하는 영역을 빼기 때문에 팝업 창 위치 지정이나 반응형 레이아웃 설계 시 더욱 정확한 값을 얻을 수 있습니다. 예제 결과에서 너비는 1366px, 높이는 728px로 출력된 것을 확인할 수 있는데, 이는 전체 해상도에서 작업 표시줄 높이만큼 차감된 수치입니다.